background.html 与 background.js - chrome 扩展

Posted

技术标签:

【中文标题】background.html 与 background.js - chrome 扩展【英文标题】:background.html vs. background.js - chrome extension 【发布时间】:2014-09-18 15:37:00 【问题描述】:

我在这里真的很困惑。我正在尝试了解 chrome 扩展的文件架构。我正在阅读此文档:https://developer.chrome.com/extensions/overview#arch

我的情况:

我想设置 oauth 流程,以便用户可以在扩展程序中登录(另一个端点是我的 django 后端)。到目前为止,我有这些文件:

background.js 
content.js
popup.html
manifest.json

我的 content.js 将消息发送到 background.js 并得到响应。到目前为止还不错!

但是现在在阅读 oauth 的文档时,我很困惑,不知道 background.html 是什么。它实际上是应该包含我的 background.js 的所有 js 代码的文件吗?但是,如果我在清单中将其更改为 .html,例如:

"background": 
"persistent": false,
"scripts": ["jquery111.js", "background.html"]

扩展程序不再工作。在 OAuth 文档中,它说:

Place the four library files in the root of your extension directory 
(or wherever your javascript is stored). Then include the .js files in your 
background page...
Your background page will manage the OAuth flow.

但在architecture doc 中,它说:

This figure shows the browser action's background page, which is defined by
background.html and has JavaScript code that controls the behavior of 
the browser action in both windows.

background.html 和 background.js 有什么区别?

【问题讨论】:

你的 background.html 基本上只是一个后台脚本的容器,你可以简单地写成<html><script src=background.js></html>。在调试扩展程序时,可以在 Chrome 的开发工具中从 chrome://extensions 页面检查后台页面。 @phette23 谢谢,但是为什么在将清单的背景从 background.js 更改为 background.html 后,扩展程序不起作用。它应该工作,对吧? 将“background.html”列为脚本是没有意义的,它是一个页面。阅读背景页面文档:developer.chrome.com/extensions/background_pages 您可能需要执行 "background": "scripts": ["background.js"] "background": "page": "background.html" (其中 HTML 包含一堆脚本标签),但不是您当前的混合混合,其中 HTML 页面被列为一个脚本。 @phette23 哦,谢谢。现在我懂了。 :) 【参考方案1】:

您只能指定任一脚本数组...

"background": 
    "persistent": false,
    "scripts": [ "jquery111.js"]

...一个页面,然后可以引用页面所需的脚本:

"background": 
    "persistent": false,
    "page": "background.html"

理论上,您的background.html 页面可能只是所需脚本的列表。

<script src="jquery111.js"></script>

如果您尝试同时指定两者,则无法加载扩展:

background.page 和 background.scripts 属性不能同时使用。无法加载清单。

【讨论】:

以上是关于background.html 与 background.js - chrome 扩展的主要内容,如果未能解决你的问题,请参考以下文章

html background.html

background 线性渐变

CSS—总结常用垂直居中方法

CSS—总结常用垂直居中方法

[OpenCV] Background subtraction

表格单元格中的 Mailchimp 背景图像