Question

我正在尝试编写一个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，我真的不明白如何使这一切工作。

Answer 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...
  }
});

无法通过Chrome扩展程序中的功能访问DOM

1 个答案: