Javascript 只执行一次Chrome扩展的脚本

我制作了一个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"
    ]
  }
}

background.js：

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

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

  }
});

script.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

---

显然，没有更多的

记住我

按钮要删除。这可能与我的

background.js

文件中的侦听器有关。什么是正确的侦听器，因此

script.js

只在

https://*.examplesite.io/subdomain/portal/#/login上执行一次，而不是在
https://*.examplesite.io
上的所有位置执行一次，最好的方法是使用您的内容脚本中的条目来加载内容脚本，而不是使用该条目来加载内容脚本。作为
content\u脚本
条目执行此操作时，每当加载指定页面时，都会注入脚本一次。与使用
chrome.tabs.executeScript（）
在URL与某个页面匹配时加载脚本相比，它要简单得多。通常，当与用户的交互开始于用户单击或按钮（您没有使用）时，或者当您希望更详细地控制脚本何时注入而不是页面始终注入一次时（您不需要这样做），应该使用
chrome.tabs.executeScript（）

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

假设您的背景脚本除了加载内容脚本之外什么也不做，那么使用
content\u scripts
条目意味着您不需要背景脚本。此外，您不需要为该特定URL明确指定
权限。对于与
内容\u脚本
匹配
键匹配的URL，您的扩展将被隐式授予权限

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

{
“清单版本”：2，
“名称”：“登录增强器”，
“说明”：“轻松登录”，
“版本”：“1.0”，
“图标”：{
“16”：“icon16.png”，
“48”：“icon48.png”，
“128”：“icon128.png”
},
“内容脚本”：[
{
“匹配项”：[“https://*.examplesite.io/subdomain/portal/#/login”]，
“js”：[“script.js”]
}
]
}
对于您在问题中所展示的内容，最好的方法是在您的应用程序中使用一个条目来加载内容脚本，而不是使用来加载内容脚本。作为
content\u脚本
条目执行此操作时，每当加载指定页面时，都会注入脚本一次。与使用
chrome.tabs.executeScript（）
在URL与某个页面匹配时加载脚本相比，它要简单得多。通常，当与用户的交互开始于用户单击或按钮（您没有使用）时，或者当您希望更详细地控制脚本何时注入而不是页面始终注入一次时（您不需要这样做），应该使用
chrome.tabs.executeScript（）

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

假设您的背景脚本除了加载内容脚本之外什么也不做，那么使用
content\u scripts
条目意味着您不需要背景脚本。此外，您不需要为该特定URL明确指定
权限。对于与
内容\u脚本
匹配
键匹配的URL，您的扩展将被隐式授予权限

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

{
“清单版本”：2，
“名称”：“登录增强器”，
“说明”：“轻松登录”，
“版本”：“1.0”，
“图标”：{
“16”：“icon16.png”，
“48”：“icon48.png”，
“128”：“icon128.png”
},
“内容脚本”：[
{
“匹配项”：[“https://*.examplesite.io/subdomain/portal/#/login”]，
“js”：[“script.js”]
}
]
}
我建议您阅读（可能与概述中链接的页面一起阅读）。具有总体架构信息，这将有助于您了解事物通常是如何组织/完成的。你可能还想阅读。你是想自己阅读，还是打算在Chrome商店上发布？如果您只想自己使用它（而且它不是一个旨在介绍您自己的Chrome扩展的项目），那么如果您将其作为用户脚本使用编写，您可能会有更好的总体体验（编写和使用）。我建议您阅读（可能与概述中链接的页面一起阅读）。具有总体架构信息，这将有助于您了解事物通常是如何组织/完成的。你可能还想阅读。你是想自己阅读，还是打算在Chrome商店上发布？如果您只想自己使用它（而且这不是一个旨在介绍您自己的Chrome扩展的项目），那么如果您将其作为用户脚本使用，您可能会有更好的总体体验（编写和使用）。