只执行一次 Chrome 扩展的脚本

Question

我制作了一个修改特定登录页面的 Chrome 脚本。它按预期工作，但我可以在控制台中看到它始终处于活动状态，尽管它应该只应用于登录站点。

我的清单文件：

{
  "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"
    ]
  }
}

背景.js：

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

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

  }
});

脚本.js

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

当我examplesite.io/subdomain在控制台上浏览时登录后，在每个新页面上都会说：

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

显然没有更多的remember-me按钮可以删除。这可能与我的background.js文件中的侦听器有关。什么是正确的侦听器，因此script.js只执行一次https://*.examplesite.io/subdomain/portal/#/login而不是到处执行https://*.examplesite.io？

Answer 1

对于您在问题中显示的内容，执行此操作的最佳方法是使用manifest.json 中的content_scripts条目来加载您的内容脚本，而不是使用它来加载您的内容脚本。每当加载指定的页面时，将其作为条目将注入一次脚本。当 URL 匹配某个页面时，它比用于加载脚本要简单得多。通常，当与用户的交互从用户单击browserAction或pageAction按钮（您没有使用）开始时，或者当您想要更详细地控制何时注入脚本而不是总是为页面注入一次时，应该使用chrome.tabs.executeScript()content_scriptschrome.tabs.executeScript()chrome.tabs.executeScript()匹配特定的 URL 或 URL 模式（您在做什么时不需要）。

在您的情况下，您希望在每次加载特定 URL 时注入一次脚本。这正是manifest.json 中存在content_scripts密钥的用例。

鉴于您的后台脚本除了加载您的内容脚本之外什么都不做，使用content_scripts条目意味着您不需要后台脚本。此外，您无需permissions为该特定 URL显式指定。您的扩展程序被隐式授予与content_scripts matches密钥匹配的 URL 的权限 。

您可以通过将manifest.json更改为：

{
  "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"]
    }
  ]
}