如何在JavaScript中获取Chrome标签页源代码

Question

I try to develop a chrome extension and I need to be able to get the source code of the current tab, so I follow the chrome example and I have three files: 我尝试开发一个chrome扩展名，我需要能够获取当前标签页的源代码，因此我遵循chrome示例，我有三个文件：

manifest.json: manifest.json：

{
    "manifest_version": 2,
    "name": "Source code getter",
    "description": "This extension is a test to get current tab source code",
    "version": "0.1",
    "browser_action": {
         "default_icon": "icon.png",
        "default_popup": "popup.html"
    }, 
    "permissions": [
        "tabs"
  ]
}

popup.html: popup.html：

<!doctype html>
 <html>
    <head>
        <title>Get source popup</title>
         <style>
             body {
                min-width: 357px;
                min-height: 357px;
                overflow-x: hidden;
            }
        </style>
        <script src="popup.js"></script>
     </head>
    <body>
    </body>
</html>

and the popup.js 和popup.js

document.addEventListener('DOMContentLoaded', function() {
    chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
        var tab = tabs[0];
        console.debug(tab.id);
        var source = document.createElement("div");
        chrome.tabs.sendMessage(tab.id, {action: "getHtml"}, function(response) {
            console.debug(response.html);
         if (response.html) {
                source.textContent = response.html;
            } else {
                source.textContent = 'I did not get the source code.';
            }
        });
        document.body.appendChild(source);
    });
});

I build the popup.js by searching across the web and I must confess I don't really know how the sendMessage works exactly, also with the doc but I think the second parameter ask the source code wich must be return in the parameter of function response, but it doesn't, here are the JS log: 我通过在网上搜索来构建popup.js，我必须承认我真的不知道sendMessage的工作原理以及文档，但是我认为第二个参数要求源代码必须返回到function参数中响应，但没有，这是JS日志：

430 popup.js:4
> Error in event handler for (unknown): Cannot read property 'html' of undefined
> Stack trace: TypeError: Cannot read property 'html' of undefined
>    at chrome-extension://boefdmhphdcngpckofecmjnihbgphmch/popup.js:7:35
>    at disconnectListener (extensions::messaging:338:9)
>    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
>    at EventImpl.dispatchToListener (extensions::event_bindings:397:22)
>    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
>    at Event.publicClass.(anonymous function) [as dispatchToListener] (extensions::utils:93:26)
>    at EventImpl.dispatch_ (extensions::event_bindings:379:35)
>    at EventImpl.dispatch (extensions::event_bindings:403:17)
>    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
>    at Event.publicClass.(anonymous function) [as dispatch] (extensions::utils:93:26)

so I got the right tab but i don't get a correct response form sendMessage function, someone can explain me why ? 所以我得到了正确的选项卡，但是我没有得到正确的响应表单sendMessage函数，有人可以向我解释为什么？ Thanks. 谢谢。

Answer 1

Judging from your manifest, you've got nothing listening for your sendMessage . 从清单中判断，您没有什么可以监听sendMessage 。

No content script defined in the manifest, so nothing loaded in the page; 清单中未定义内容脚本，因此页面未加载任何内容； no executeScript calls in the popup code, so nothing gets loaded from there. 弹出代码中没有executeScript调用，因此没有任何内容从那里加载。

So, nothing to process your message, and the callback gets called with an error set. 因此，没有任何东西可以处理您的消息，并且回调会以错误集被调用。 Your message {action: "getHtml"} does not magically mean anything; 您的消息{action: "getHtml"}并不具有任何神奇的含义； you need a script on the page's side to receive it and form a response. 您需要页面一侧的脚本来接收它并形成响应。

What you need is a content script that will add a listener for chrome.runtime.onMessage , that will process your request. 您需要一个内容脚本，该脚本将添加chrome.runtime.onMessage的侦听chrome.runtime.onMessage ，该侦听器将处理您的请求。 Let's call it content.js . 我们称之为content.js 。 Then you can do this: 然后，您可以执行以下操作：

chrome.tabs.executeScript({code: "content.js"}, function() {
  if(chrome.runtime.lastError) {
    console.error(chrome.runtime.lastError.message);
    return;
  }
  chrome.tabs.sendMessage(tab.id, {action: "getHtml"}, function(response) {
    /* process response */
  });
});

Code for the appropriate content.js is outside the scope of this question. 适当的content.js代码不在此问题的范围内。 Have a look at the Architecture Overview too, it's a good introduction of how content scripts work. 还可以查看“ 架构概述” ，它很好地介绍了内容脚本的工作方式。

如何在JavaScript中获取Chrome标签页源代码

问题描述

1 个解决方案

解决方案1
0 2014-09-14 21:13:07

如何在JavaScript中获取Chrome标签页源代码

问题描述

1 个解决方案

解决方案1 0 2014-09-14 21:13:07

解决方案1
0 2014-09-14 21:13:07