Javascript 从Firefox插件（WebExtensionAPI）修改网页：如何正确访问元素？

我正在将旧的Firefox扩展迁移到WebExtenstion API。以下是我的分机的功能：

将按钮添加到工具栏

在选项中指定四个设置

当用户单击按钮时，我验证URL。如果URL匹配三个可能值中的一个，我将使用选项页面中的值填充页面上的一些输入元素，然后单击表单按钮

下面是我的manifest.json：

{

  "manifest_version": 2,
  "name": "Login",
  "version": "3.0",

  "description": "Login to myinterfaces",
  "homepage_url": "localhost",
  "icons": {
    "48": "icons/button-1.png"
  },

  "permissions": [
    "activeTab", "storage", "tabs"
  ],

  "browser_action": {
    "default_icon": "icons/button-1.png",
    "default_title": "My Login"
  },


  "options_ui": {
    "page": "options.html"
  },


  "background": {
    "scripts": ["index.js"]
  }
}

在index.js中，我成功地从选项页面获取了值，并确定了活动选项卡的URL。之后，我尝试修改页面上的值。我是这样做的：

var doc = window.content.document;

doc.getElementById("btnLogin").disabled = false;
doc.getElementById("loginUserName").value = loginUserName;
doc.getElementById("loginPassword").value = loginPassword;

但是为了

doc.getElementById("btnLogin").disabled = false;

。。。我得到：

TypeError: doc.getElementById(...) is null

所以我读了这一页：

不确定我是否理解正确，因此这里有一些问题：

是否可以从后台脚本访问网页？如果可能的话，如何处理我的错误？如果不可能，我是否正确理解应该在内容和后台脚本之间使用消息传递？那么，我是否必须将loginUserName和loginPassword值从后台脚本发送到内容脚本，并在内容脚本中修改页面？对吗

谢谢， 浣熊

是否可以从后台脚本访问网页

否。

window.content.document

是该上下文中的背景页。将背景页视为在不可见选项卡中打开的单独文档

您需要一个内容脚本，并且需要与之通信。请参阅上的Chrome文档-我相信MDN上也有类似的文档

如果不可能，我是否正确理解应该在内容和后台脚本之间使用消息传递？那么，我是否必须将loginUserName和loginPassword值从后台脚本发送到内容脚本，并在内容脚本中修改页面

这是正确的，但如果使用for选项，则可以直接从内容脚本访问该选项

但您需要消息：只有后台页面才能为工具栏按钮（WebExtension术语中的“浏览器操作”）获取

onClicked

事件

---

请注意，您不必提前（通过清单）注入内容脚本。您可以在此处使用+

“activeTab”

权限，这将在不使用扩展时为用户带来更好的性能，并大大减少可怕的权限警告。

对于将来遇到此问题的任何人，以下是两个脚本之间的消息传递的一个很好的示例：