javascript - 如何在 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

这里有两个问题。

首先，代码不工作，你不知道为什么。

alert is not showing up at all

您需要学习调试扩展以了解哪里出了问题。尝试自己解决问题很重要，即使您没有这样做。有谷歌自己有点过时的 tutorial主要涵盖弹出窗口，并且有一个关于后台脚本的规范问题:

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

---

因此假设您遵循建议并尝试调试。你会很快了解到 alert 没有被调用，因为有一个异常(exception):

Uncaught TypeError: Cannot read property 'value' of null

这导致了第二个问题:document.getElementById('editpane_title') 找不到元素。

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

此时，您应该阅读 Architecture Overview .您将在那里学习:

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

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

How to access the webpage DOM rather than the extension page DOM?

---

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

这种古老的机制是阻塞:它会阻止 JS 上下文执行任何操作，直到您关闭模态窗口。这搞砸了一些异步的扩展 API，并与浏览器的 native 组件交互。

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

所以，尽早改掉这个坏习惯:

• printf/echo 式调试的等价物是 console.log()，输出可访问，如调试部分所述.
• 要提醒用户，您应该寻求其他 UI 功能，例如通知。