在Chrome扩展中,背景脚本与内容脚本的区别

62

我在developer.chrome.com上了解了背景页面和内容脚本,但我对它们感到困惑,我无法理解什么时候使用背景脚本,什么时候使用内容脚本。例如:

manifest.json

{
    "name": "Hello World",
    "version": "2.0",
    "manifest_version": 2,
    "background": 
    {
        "scripts": ["background.js"]
    },
    "content_scripts":
    [
        {
            "matches": ["http://*/*", "https://*/*"],
            "js": ["js/myScript.js"]
        }
    ],
    "permissions": ["tabs", "http://*/*"],
    "browser_action":
    {
        "default_icon": "icon.png"
    }
}

如果background.js是:

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  alert("test");
});

这段代码可以正常工作,但是如果我将相同的代码放在myScript.js中,它就无法工作。

因此,我不知道应该将哪个脚本放在background.js中,哪个应该放在内容脚本中。


我在这个Youtube视频中找到了非常好的解释 - https://www.youtube.com/watch?v=ew9ut7ixIlI - dheeraj
2个回答

69

实际上,内容脚本是在网页上下文中运行的JavaScript文件。通过使用标准的文档对象模型(DOM),它们可以读取浏览器访问的网页的详细信息,或对其进行更改。

扩展程序常见的需求是要有一个单个长时间运行的脚本来管理某些任务或状态。 背景页面就能解决这个问题。背景页面是在扩展进程中运行的HTML页面。它存在于您的扩展程序的整个生命周期中,并且同时只有一个实例处于活动状态。


嗨,谢赫,感谢您的快速回答。但这只是理论。我想问一些具体的情况:我需要处理浏览器操作图标上的点击事件,应该使用内容脚本还是后台?或者我想刷新(F5)页面,我应该使用后台还是内容脚本? - Dark Light
3
@DarkLight,是的,你可以使用内容脚本,请参考 这个答案 以及 还有这个,以及 这个 - The Alpha
嗨 @TheAlpha,我有一个问题。就性能或处理而言,它们两者是否有任何区别。如果我需要处理一些庞大的脚本,最好在后台还是内容脚本中进行?或者两种方式都可能导致一些间隔? - pvnarula
根据你的需求而定,对于处理一些常见的大型脚本来说,使用后台脚本更好。 - The Alpha
"它们可以阅读浏览器访问的网页的详细信息,或对其进行更改"。[内容脚本实际上比这个引用所表达的要受到更多限制](https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Content_script_environment) - Mattwmaster58

35

我知道这个问题早已过时,但最近我开始从事Chrome扩展程序开发,并且有和你一模一样的问题。所以我希望我的回答能够解决您的困惑。

你已经将myScript.js指定为你的内容脚本。你的代码放在内容脚本中不起作用是因为它需要监听浏览器按钮点击事件。然而,内容脚本只有有限的访问Chrome API的权限,主要是chrome.runtime事件。它无法检测chrome.browserAction.onClick事件。

另一方面,后台脚本可以访问完整的Chrome API数组。

何时使用后台脚本而不是内容脚本取决于您的扩展目标。您是否只是想简单地更改网页的显示?那么你只需要内容脚本,不需要后台脚本。例如,如果你想制作一个可以在任何网页上切换暗黑模式的扩展程序,你就可以不用后台脚本。

如果您想为您的扩展保存用户偏好设置,以便在列表中的站点上自动切换到暗黑模式,则需要添加一个后台脚本:

  • 将用户的偏好设置存储到Chrome存储中。
  • 检测用户是否已经进入列表中的站点。
  • 向内容脚本发送一条消息,指示它切换到暗黑模式。

这不是最好的例子,但我的观点是当您需要处理常见功能并保持用户体验时,需要后台脚本。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接