2

我有一个 Chrome 扩展程序，当您单击该图标时，它会显示一个文本字段和一个按钮，用于搜索。显示的内容基本上是从清单中调用的 HTML 文档，如下所示：

"browser_action": {
    "default_popup": "popup.html"
 }

现在，问题是如何使用 javascript 访问浏览器中加载的当前文档？因为我想从文本字段中提取问题，然后去当前文档中查找答案。

谢谢！

编辑1：

代码：

清单.json

{
  "name": "SmartSearch",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Smart Search extension for Google Chrome.",
  "content_scripts": 
  [
  {
    "matches": ["<all_urls>"],
    "js": ["smartsearch.js"]
  }
  ],
  "browser_action": {
     "default_icon": "icon.png",
"default_popup": "popup.html"
  }

}

智能搜索.js

SmartSearch() = function (){

    var x = document.title;
    alert(x);
}
window.onload = SmartSearch;

popup.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Smart Search</title>
    <script type="application/javascript" src="smartsearch.js"></script>
  </head>
  <body>
    <p>Smart Search</p>
    <form>
      <input type="text" id="search_text_field"></input>
      <input type="button" id="search_button" value="Search"/>
    </form>
  </body>
</html>

现在，我要做的就是在按下扩展图标时显示当前加载页面的标题，只是为了检查我是否可以访问 DOM。问题是我得到了弹出窗口的标题。解决方案是什么？

EDIT2： 我看到如果我转到一个页面，在加载时确实会出现带有页面标题的警报（有一些例外，比如 youtube 页面），但是当我按下扩展程序的图标时我想这样做.

4

2 回答 2

2

您需要使用可以在清单中声明的​​内容脚本，如下所示：

  {
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],
  ...
}

matches您将在其中使用脚本的域在哪里。这样css和js就在文档本身里面。但是如果您需要将数据从文档发送到您的插件，则需要使用Message Passing。这里有一个示例，说明如何从内容脚本向插件发送消息。

  chrome.extension.sendMessage({greeting: "hello"}, function(response) {
      console.log(response.farewell);
  });

然后你必须使用chrome.extension.onMessage.addListener来接收消息。例子：

    chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
          console.log(sender.tab ?
              "from a content script:" + sender.tab.url :
              "from the extension");
          if (request.greeting == "hello")
              sendResponse({farewell: "goodbye"});
  });

另一方面，如果您想从插件向您必须使用的内容脚本发送消息。

chrome.tabs.getSelected(null, function(tab) {
  chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {
    console.log(response.farewell);
  });
});

和以前一样chrome.extension.onMessage.addListener接收对方的消息。

这是一个非常好的入门资源。

编辑： content_scripts 初始化的工作示例

清单：

    {
    "name": "Intervention",
    "version" : "1.0",
    "content_scripts": [
    {
      "matches": ["http://*/**"],
      "js": ["action.js"]
    }

   ],

  "manifest_version" : 2
}

JS

var element = document.title;
alert(element);
于 2013-01-18T19:08:00.583 回答
0

您希望在页面上运行内容脚本并使用消息传递在扩展程序和选项卡之间进行交互。

内容脚本从您的扩展中获取请求，在页面上进行计算（您将有权访问 DOM，因此您应该能够在页面上执行任何操作）。

然后，内容脚本会将响应发送回您的扩展程序，您可以在弹出窗口中显示该响应。

于 2013-01-18T19:05:23.807 回答