I've made a Chrome script that modifies a specific login Page. It works as expected, but I can see in the console that it is always active, although it should only be applied on the login site.

My manifest file:

{
  "manifest_version": 2,
  "name": "Login Enhancer",
  "description": "Login without a hassle",
  "version": "1.0",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "permissions": [
    "https://*.examplesite.io/subdomain/portal/#/login"
  ],
  "background": {
    "scripts": [
      "background.js"
    ]
  }
}

background.js:

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
  if (changeInfo.status == 'plete' && tab.active) {

    chrome.tabs.executeScript(null, {file: 'script.js'});

  }
});

script.js

// delete useless Remember Me Function
document.querySelector('.remember-me').remove();

After I've logged in when I'm browsing on examplesite.io/subdomain the console says on every new page:

Uncaught TypeError: Cannot read property 'remove' of null
    at script.js:2

Obviously there is no more remember-me button to remove. This has probably to do with the Listener in my background.js File. What is the correct listener so the script.js is only executed once on https://*.examplesite.io/subdomain/portal/#/login and not everywhere on https://*.examplesite.io?

I've made a Chrome script that modifies a specific login Page. It works as expected, but I can see in the console that it is always active, although it should only be applied on the login site.

My manifest file:

{
  "manifest_version": 2,
  "name": "Login Enhancer",
  "description": "Login without a hassle",
  "version": "1.0",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "permissions": [
    "https://*.examplesite.io/subdomain/portal/#/login"
  ],
  "background": {
    "scripts": [
      "background.js"
    ]
  }
}

background.js:

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
  if (changeInfo.status == 'plete' && tab.active) {

    chrome.tabs.executeScript(null, {file: 'script.js'});

  }
});

script.js

// delete useless Remember Me Function
document.querySelector('.remember-me').remove();

After I've logged in when I'm browsing on examplesite.io/subdomain the console says on every new page:

Uncaught TypeError: Cannot read property 'remove' of null
    at script.js:2

Obviously there is no more remember-me button to remove. This has probably to do with the Listener in my background.js File. What is the correct listener so the script.js is only executed once on https://*.examplesite.io/subdomain/portal/#/login and not everywhere on https://*.examplesite.io?

• javascript
• google-chrome-extension

Share Improve this question Follow asked Mar 23, 2017 at 23:01 mlesmles 3,4961414 gold badges5959 silver badges105105 bronze badges 2

• 1 I suggest you read the Chrome extension overview (perhaps along with the pages linked from the overview). The architecture section has overall architecture information which should help your understanding of how things are generally organized/done. You will probably also want to read Content Scripts. – Makyen ♦ Commented Mar 24, 2017 at 0:02
• 1 Are you wanting this just for yourself, or are you planning to distribute it on the Chrome store? If you want it just for yourself (and it's not a project intended to introduce yourself to Chrome extensions), you will probably have a better overall experience (writing and using) if you write this as a user-script using Tampermonkey. – Makyen ♦ Commented Mar 24, 2017 at 0:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

For what you have shown in the question, the best way to do this is to use a content_scripts entry in your manifest.json to load your content script instead of using chrome.tabs.executeScript() to do so. Doing it as a content_scripts entry will inject the script once whenever the specified page is loaded. It is significantly less plicated than using chrome.tabs.executeScript() for the purpose of loading a script when a URL matches a certain page. In general, chrome.tabs.executeScript() should be used when the interaction with the user begins with the user clicking on a browserAction or pageAction button (which you are not using), or when you want more detailed control over when the script is injected other than always once for pages matching a specific URL, or URL pattern (which you don't need for what you are doing).

In your case, you are wanting to inject the script once, every time a specific URL is loaded. This is exactly the use case for which the content_scripts key in manifest.json exists.

Given that your background script was doing nothing other than loading your content script, using a content_scripts entry means you do not need a background script. In addition, you don't need to explicitly specify permissions for that particular URL. Your extension is implicitly given permissions for the URLs which match the content_scripts matches key.

You could do this by changing your manifest.json to:

{
  "manifest_version": 2,
  "name": "Login Enhancer",
  "description": "Login without a hassle",
  "version": "1.0",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },

  "content_scripts": [
    {
      "matches": ["https://*.examplesite.io/subdomain/portal/#/login"],
      "js": ["script.js"]
    }
  ]
}