Chrome Extension: Edit the current url on click and then redirect to the edited one

Question

I am a psychology student and I read papers very often. The university libraries provide the access to the databases but I need to use library search engine and log in every time. Quite annoying. I found a way to avoid jumping around the pages.

Here is the method:

I add "ezp.lib.unimelb.edu.au" to the end of the target database address after I found a paper in Google Scholar, then it will redirect to the library login page.

For example, the paper's address is:

http://www.sciencedirect.com/science/article/pii/S0006899315008550

I modified it as:

http://www.sciencedirect.com.ezp.lib.unimelb.edu.au/science/article/pii/S000689315008550

I want to create a Chrome Extension to finish this job on click (too lazy). I tried for hours but it does not work.

---

Here is what I have done:

I have three files in a folder:

First file: manifest.json

{
  "manifest_version": 2,

  "name": "Damn! Take me to the library!",
  "description": "This extension automatically adds the 'ezp.lib.unimelb.edu.au' to the browser's address, allowing you to visit the databases bought by the library quickly",
  "version": "1.0",

  "browser_action": {
    "default_icon": "unimelb.png",
    "default_title": "Damn! Take me to the library!"
  },
  
  "background":{
    "scripts":["popup.js"]
  },

  "permissions": [
    "activeTab",
    "tabs"
  ]
}

Second file: popup.js

function getCurrentTabUrlthenChangeIt(callback) {
  var queryInfo = {
    active: true,
    currentWindow: true
  };

  chrome.tabs.query(queryInfo, function(tabs) {
    
    var tab = tabs[0];

    var url = tab.url;

    callback(url);

    var newurl = url.replace('/',"ezp.lib.unimelb.edu.au/");

    window.location.replace(newurl);


  });

}

Third file: unimelb.png

---

When I load this folder into Chrome, it does not work.

It's the first time I use JS, anyone has any suggestions?

Thanks!

Answer 1

You can do this even without clicking. You can use the content script for this URL pattern so that your script gets injected to this page. Then you can send a message to the background script using chrome.runtime.sendMessage() and your listener will create a link you want here and then just reload the tab using chrome.tabs.update() with the new URL.

manifest.json

{
 "name": "My extension",
 ...

  "content_scripts": [{
      "matches": ["http://www.sciencedirect.com/science/article/pii/*"],
      "js": ["content-script.js"]
  }],
  ...
}

content-script.js

chrome.runtime.sendMessage({loadURL: true});

background.js

chrome.runtime.onMessage.addListener(function(message, sender, response) {
     if (message.loadURL) {
         var newurl = sender.tab.url.replace("/", "ezp.lib.unimelb.edu.au/");
         chrome.tabs.update(sender.tab.id, {url: newURL})     
     }
);

This is my first answer to the StackOverflow Community, I hope it helps.