无法通过Chrome扩展程序中的函数访问DOM

Question

I'm trying to write a Chrome extension that highlights certain words that were entered in extension's textfield 我正在尝试编写一个Chrome扩展程序，以突出显示在扩展程序的文本字段中输入的某些单词

For example: I enter "web" in extension's area, press the button. 例如：我在扩展程序区域中输入“ web”，然后按按钮。 On active tab all "web" words are should be highlighted. 在活动标签上，所有“网络”字词均应突出显示。

I've found a nice web-page that has all the functions I need. 我找到了一个不错的网页，其中包含我需要的所有功能。

In my code, when I try to use them in my Extension, nothing works. 在我的代码中，当我尝试在扩展程序中使用它们时，没有任何效果。

manifest file 清单文件

{
"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 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>

And here's popup.js file: it's too long, so I made a pastebin document: 这是popup.js文件：太长了，所以我制作了一个pastebin文档：

http://pastebin.com/g5ZenE48 http://pastebin.com/g5ZenE48

I can't get innerHTML of webpage from these functions and I don't really understand how to make this all work. 我无法从这些功能中获取网页的innerHTML，而且我不太了解如何使所有功能正常工作。

Answer 1

sean-adams is correct, your browser action (popup.html) cannot communicate directly with your content script (popup.js). sean-adams是正确的，您的浏览器操作（popup.html）无法与您的内容脚本（popup.js）直接通信。 You can think of a content script as being an addition to whatever page the user is visiting, whereas the browser action is directly integrated as part of your chrome extension. 您可以将内容脚本视为用户正在访问的任何页面的补充，而浏览器操作则直接集成为chrome扩展的一部分。

So, you will indeed need to use message passing to communicate. 因此，您确实需要使用消息传递进行通信。 It's simple though. 这很简单。 First, I recommend renaming your browser action popup to something like browser_popup.html . 首先，我建议将浏览器操作弹出窗口重命名为browser_popup.html 。 I'll use a stripped down example for brevity: 为了简洁起见，我将使用一个简化的示例：

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

You'll also want another file browser_popup.js for handling events. 您还需要另一个文件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');
  });
});

In your content script (let's call it content.js) you need to listen for the message: 在内容脚本中（我们将其称为content.js），您需要侦听消息：

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

无法通过Chrome扩展程序中的函数访问DOM

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-08-08 00:25:21

无法通过Chrome扩展程序中的函数访问DOM

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-08-08 00:25:21

解决方案1
1 已采纳 2014-08-08 00:25:21