如何在Chrome扩展程序中获取输入值？

Question

我有一个包含此元素的网站：

<input type="text" id="editpane_title" fnk="tt" maxlength="80" name="title" value="st benedict crucifix">

我希望使用Chrome扩展程序获取并设置该输入的值：

{
  "manifest_version": 2,
  "name": "demo",
  "version": "1.0",
  "description": "demo",
  "icons": { "16": "icon16.png",
             "48": "icon48.png",
             "128": "icon128.png" },

  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },

  "permissions": [ "tabs" ],

  "browser_action": {
      "default_icon": {
        "16": "icon16.png",
        "24": "icon24.png",
        "32": "icon32.png"
      },
      "default_title": "demo"
    }
}

以及background.js：

chrome.browserAction.onClicked.addListener(function(tab) {

    chrome.tabs.query({ active: true, lastFocusedWindow: true }, function (tabs) {

        var title = document.getElementById('editpane_title').value;
        alert(title);

    });


});

并且警报根本没有显示。我尝试多次重装但仍然失败。

我在这里错过了什么？

Answer 1

这里有两个问题。

首先，代码无效，您不知道原因。

  

警报根本没有显示

您需要学习调试扩展程序以了解错误。即使您没有这样做，尝试自己解决问题也很重要。有谷歌自己有点过时tutorial，主要涵盖弹出窗口，这是背景脚本的这个规范问题：

<强> Where to read console messages from background.js in a Chrome extension?

因此，假设您遵循建议并尝试调试。您将很快了解到alert未被调用，因为有一个例外：

  

未捕获的TypeError：无法读取null

的属性“value”

这会导致第二个问题： document.getElementById('editpane_title')无法找到元素。

问问自己：哪个 document在这里被引用？或者更确切地说，为什么它会自动成为您正在查看的页面？

此时，您应该阅读Architecture Overview。你会在那里学习：

• 后台脚本实际上位于他们自己的文档中的单独的不可见选项卡中。
• 要访问可见网页的document，您需要Content Script。
• 要在它们之间传递数据，您必须使用Messaging和/或storage API。

有了这些知识，你现在应该转向以下规范问题：

<强> How to access the webpage DOM rather than the extension page DOM?

最后一点，你不应该使用alert来检查程序的状态，或者出于任何原因。

这个古老的机制是阻塞：它会阻止JS上下文做任何事情，直到你关闭模态窗口。这搞砸了一些异步的扩展API，并与浏览器的本机组件接口。

事实上，在Firefox WebExtensions中expicitly can't use them from a background page。

所以，早点摆脱这个坏习惯：

• 相当于printf / echo样式的调试是console.log()，输出可以按照调试部分的说明进行访问。
• 要提醒用户，您应该寻求其他用户界面功能，例如通知。