从Firefox加载项（Webextension API）修改网页：如何正确访问元素？ [英] Modifying a web page from Firefox add-on (Webextension API): how to access the elements properly?

问题描述

我正在将旧的Firefox扩展迁移到WebExtenstion API。这里是我的扩展名：

1. 在工具栏中添加一个按钮


2. 指定四个设置选项


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

这里是我的manifest.json：

pre $ {

manifest_version： 2，
name：Login，
version：3.0，
$ bdescription：登录到myinterfaces，
homepage_url ：localhost，
图标：{
48：图标/按钮1.png
}，

权限： [
activeTab，storage，tabs
]，

browser_action：{
default_icon：图标/按钮-1。 png，
default_title：我的登录
}，


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（...）为空
  

所以我读了这个页面： https://developer.mozilla.org / zh-CN / Add-ons / WebExtensions / Modify_a_web_page

不知道我是否正确理解所有内容，所以一些问题：

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

谢谢，
Racoon

解决方案

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

window.content.document 是上下文中的后台页面。将背景页面想象成一个单独的文档，在一个不可见的选项卡中打开。

您需要一个内容脚本，并且需要与之通信。请参阅扩展架构上的Chrome文档 - 我确定MDN上也有相似之处。 / p>

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

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

但是您需要消息：只有背景页面可以获得工具栏按钮的 onClicked 事件（WebExtension条款中的浏览器操作）。
$ b 请注意，您不必事先注入内容脚本（通过清单）。您可以使用程序化注入 + activeTab这里的权限，这样在不使用扩展名时，用户可以获得更好的性能，而且可怕的权限警告也是如此。

I am migrating my old Firefox extenstion to WebExtenstion API. Here is what my extension does:

1. add a button to the toolbar
2. specify four settings in Options
3. when a user clicks a button, I verify the URL. If the URL matches one of three possible values, I use the values from the option page to fill some input elements on the page and click a form button.

So here is my 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"]
  }
}

In index.js, I successfully get the values from the option page and determine the URL of my active tab. After that, I am trying to modify the values on the page. Here is how I do it:

var doc = window.content.document;

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

But for ...

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

... I am getting:

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

So I read this page: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Modify_a_web_page

Not sure if I understand everything correctly, so here are some questions:

Is it possible to access the web page from the background script? If it is possible, how to cope with the error I have? If it is not possible, do I understand right that I am supposed to use messaging between content and background scripts? So do I have to send loginUserName and loginPassword values from the background script to the content script and modify the page in the content script? Is it correct?

Thanks, Racoon

解决方案

Is it possible to access the web page from the background script?

No. window.content.document is the background page in that context. Think of a background page as a separate document open in an invisible tab.

You need a content script and need to communicate with it. See Chrome documentation on extension architecture - I'm sure there are similar on MDN.

If it is not possible, do I understand right that I am supposed to use messaging between content and background scripts? So do I have to send loginUserName and loginPassword values from the background script to the content script and modify the page in the content script?

This is correct, though if you use browser.storage for options you can directly access that from a content script.

But you will need messaging: only the background page can get the onClicked event for your toolbar button ("browser action" in WebExtension terms).

Note that you don't have to inject the content script in advance (through manifest). You can use programmatic injection + "activeTab" permission here, which results in better performance for the user when not using your extensions and far less scary permission warnings.

这篇关于从Firefox加载项（Webextension API）修改网页：如何正确访问元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！