使用Javascript获取当前文档_Javascript_Google Chrome_Google Chrome Extension

使用Javascript获取当前文档

javascript google-chrome google-chrome-extension

使用Javascript获取当前文档,javascript,google-chrome,google-chrome-extension,Javascript,Google Chrome,Google Chrome Extension,我有一个Chrome扩展，当你点击图标时，它会显示一个文本字段和一个按钮，用于搜索。显示的内容基本上是从清单调用的HTML文档，如下所示： "browser_action": { "default_popup": "popup.html" } { "name": "My extension", ... "content_scripts": [ { "matches": ["http://www.google.com/*"], "css"

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

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

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

现在，问题是如何使用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"
  }

}

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页面），但我想在按下扩展图标时这样做。

您想在页面上运行一个警报，并使用它在扩展和选项卡之间进行交互

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

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

您需要使用一个可以在清单上声明的wich，如下所示：

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

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

其中

匹配

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

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

与之前相同，在另一端接收消息

是一个非常好的入门资源

编辑：内容脚本初始化的工作示例
美甲师：

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

对所有DOM操作使用内容脚本。请您更具体一点，因为这是我第一次处理chrome扩展。如果我想在任何页面上使用脚本，而不是在特定页面上使用脚本，该怎么办？您可以使用“匹配项”声明所有内容：[“*”]，记住用户，在安装插件时，您将收到警告，提醒您在他访问的所有站点中请求使用插件的许可。您还可以声明多个特定站点。小更正必须是
“匹配项”：“
而不是
“匹配项”：[“*”]
好的，谢谢您的更正。。。这可以给他省去一些麻烦。