Question

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

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

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

谢谢！

EDIT1：

代码：

的manifest.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"
  }

}

smartsearch.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页面），但是当我按下扩展名的图标时我想这样做。 / p>

Answer 1

你需要使用一个content script，你可以在你的清单上声明如下：

  {
  "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之前相同，以便在另一方回复消息。

This是一个很好的入门资源。

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

Manifiest：

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

   ],

  "manifest_version" : 2
}

JS

var element = document.title;
alert(element);

Answer 2

您希望在网页上投放content script并使用message passing在您的扩展程序和标签页之间进行互动。

内容脚本从您的扩展程序获取请求，在页面上进行计算（您可以访问DOM，这样您就可以在页面上执行任何操作）。

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

使用Javascript获取当前文档

2 个答案: