Question

我正在将旧的Firefox扩展迁移到WebExtenstion API。以下是我的扩展程序：

在工具栏中添加一个按钮
在选项
当用户点击按钮时，我会验证该网址。如果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

所以我读了这页：https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Modify_a_web_page

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

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

谢谢，浣熊

Answer 1

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

没有。 window.content.document是该上下文中的后台页面。将背景页面视为在隐形标签中打开的单独文档。

您需要一个内容脚本并需要与之通信。请参阅extension architecture上的Chrome文档 - 我确定MDN上有相似内容。

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

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

但您需要发送消息：只有后台页面才能获得工具栏按钮的onClicked事件（＆＃34;浏览器操作＆＃34;在WebExtension术语中）。

请注意，您不必提前注入内容脚本（通过清单）。您可以在此处使用programmatic injection + "activeTab"权限，这样可以在不使用您的扩展程序时提高用户的性能，并且可以获得更少的可怕权限警告。

从Firefox附加组件（Webextension API）修改网页：如何正确访问元素？

1 个答案: