无法通过 Chrome 扩展中的函数访问 DOM答案

【问题标题】：Can't access DOM via functions in Chrome Extension无法通过 Chrome 扩展中的函数访问 DOM
【发布时间】：2014-08-07 21:05:06
【问题描述】：

我正在尝试编写一个 Chrome 扩展程序来突出显示在扩展程序的文本字段中输入的某些单词

例如：我在扩展区输入“web”，按下按钮。在活动选项卡上，所有“网络”字词都应突出显示。

我找到了一个不错的web-page，它具有我需要的所有功能。

在我的代码中，当我尝试在我的扩展程序中使用它们时，没有任何效果。

清单文件

{
"manifest_version": 2,

"name": "Word search & highlight",
"version": "1.0",

"icons": {
    "16": "16x16.png",
    "32": "32x32.png",
    "48": "48x48.png",
    "128": "128x128.png"
 },
"content_scripts": [
{
  "matches": [ "*://*/*" ],
  "js": [ "popup.js"],
  "run_at": "document_end"
 }
],

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


"browser_action": {
   "default_title": "Start searching",
    "default_icon": "48x48.png",
   "default_popup": "popup.html"
 }
}

popup.html

<!DOCTYPE html>
<html>
<head>
<script src="popup.js"></script>
<title></title>
</head>
<body>
<input type="text" id="searchtextfield"><br>
<input id="btn_save" value="Save" type="button">
<input id="btn_search" value="Search" type="button"><br>
</body>
</html>

这里是popup.js文件：太长了，所以我做了一个pastebin文件：

http://pastebin.com/g5ZenE48

我无法从这些函数中获取网页的 innerHTML，我真的不明白如何使这一切正常工作。

【问题讨论】：

您以错误的方式处理此问题。在弹出上下文中运行的代码不能充当内容脚本。我建议您查看message passing，因为您需要实现以下工作流程：1）用户在弹出窗口中输入文本。 2) 弹出窗口向内容脚本发送消息。 3) 内容脚本处理 DOM 操作。

标签： javascript html google-chrome google-chrome-extension

【解决方案1】：

sean-adams 是正确的，您的浏览器操作 (popup.html) 无法直接与您的内容脚本 (popup.js) 通信。您可以将内容脚本视为用户正在访问的任何页面的附加内容，而浏览器操作直接集成为您的 chrome 扩展程序的一部分。

因此，您确实需要使用消息传递进行通信。不过这很简单。首先，我建议将您的浏览器操作弹出窗口重命名为browser_popup.html。为简洁起见，我将使用一个精简的示例：

//browser_popup.html
<input type="button" id="my_button" value="Click Me">
<script src='browser_popup.js'></script>

您还需要另一个文件 browser_popup.js 来处理事件。

//browser_popup.js
var button = document.querySelector('#my_button');
button.addEventListener('click', function() {
  // Send message to active tab
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, 'button_clicked');
  });
});

在您的内容脚本（我们称之为 content.js）中，您需要监听消息：

//content.js
chrome.runtime.onMessage.addListener(function(message) {
  if (message == 'button_clicked') {
    // code to modify page...
  }
});

【讨论】：