在弹出窗口中显示特定的源代码行答案

【问题标题】：Display Specific Line Of Source Code in Popup在弹出窗口中显示特定的源代码行
【发布时间】：2012-04-26 12:44:16
【问题描述】：

我对整个 chrome 扩展世界非常陌生。

我已通读教程“hello world”页面并试图了解 content_scripts 和 background.html - 但我可能服用过量，似乎无法找到答案，我确信这是一个简单的任务。

在标签页中，网站包含以下隐藏的 HTML：

<div class="XYZ">
<input id="form_ID" type="hidden" value="REF_CODE#Product_CODE#Product Name#">
</div>

我想弄清楚的是如何显示

参考代码
产品代码
产品名称

在 popup.html 中

我不打算编辑 html 或以任何方式操作它。它只是显示隐藏的 HTML - 在一个易于阅读的弹出窗口中。

希望这是有道理的..

提前致谢。

更新：

Popup.html

<html>
<head>
<script>
function readIds() {
    console.log('Send request to content script');
    document.getElementById("response").innerText = "Requesting...";
    chrome.tabs.getSelected(null,function(tab){
       chrome.tabs.sendRequest(tab.id, {cmd: "readIds"}, function(response){
        console.log('Response from page is:' + response);
        document.getElementById("response").innerText = JSON.stringify(response);
        });
    });
}
</script>
</head>
<body style="width:400px;">
<a href="javascript:readIds();return false;">Click to read ids</a>
<pre id="response"></pre>
</body>
</html>

Content_script.js

// add a listener to get messages from background, popup
chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
        switch (request.cmd) {
            case "readIds":
                console.log("readIds", request);
                document.getElementById("productID");
                sendResponse({refCode:1, productCode: 2, productName: 3});
                break;
        }
});

manifest.json

{
  // Required
  "name": "WP Debug",
  "version": "0.0.1",

  // Recommended
  "description": "A plain text description",
  "icons": { "48": "icon.png" },
  //"default_locale": "en",

  // Pick one (or none)
  "browser_action": {
    "default_icon": "icon.png", // optional
    "default_title": "WP Debug",      // optional; shown in tooltip
    "popup": "popup.html"
    },

  "permissions": [ "http://*/", "https://*/", "tabs" ],

  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content_script.js" ],
      "run_at": "document_idle"
    }
    ]
}

【问题讨论】：

标签： google-chrome-extension

【解决方案1】：

您的弹出窗口需要向您的内容脚本发送一条消息，然后该脚本会收集隐藏字段信息并将响应发送回弹出窗口。

这是一个例子：

popup.html

<html>
<head>
<script>
function readIds() {
    console.log('Send request to content script');
    document.getElementById("response").innerText = "Requesting...";
    chrome.tabs.getSelected(null,function(tab){
        chrome.tabs.sendRequest(tab.id, {cmd: "readIds"}, function(response){
            console.log('Response from page is:' + response);
            document.getElementById("response").innerText = JSON.stringify(response);
        });
    });
}
</script>
</head>
<body style="width:400px;">
<a href="javascript:readIds();return false;">Click to read ids</a>
<pre id="response"></pre>
</body>
</html>

content_script.js

// add a listener to get messages from background, popup
chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
        switch (request.cmd) {
            case "readIds":
                console.log("readIds", request);
                //TODO: Get real values to send from page
                //e.g. document.getElementById("someid") etc
                sendResponse({refCode:1, productCode: 2, productName: 3});
                break;
        }
});

mainfest.json

{
  // Required
  "name": "Foo Extension",
  "version": "0.0.1",

  // Recommended
  "description": "A plain text description",
  "icons": { "48": "foo.png" },
  //"default_locale": "en",

  // Pick one (or none)
  "browser_action": {
    "default_icon": "Foo.png", // optional
    "default_title": "Foo Extension",      // optional; shown in tooltip
    "popup": "popup.html"
    },

  "permissions": [ "http://*/", "https://*/", "tabs" ],

  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content_script.js" ],
      "run_at": "document_idle"
    }
    ]
}

查看文档：http://code.google.com/chrome/extensions/messaging.html

【讨论】：

感谢 Richard 的反馈和示例。将在接下来的几天内对其进行测试。
不用担心。如果这回答了您的问题，请标记为答案。谢谢。
嗨，理查德，我收到了 Uncaught SyntaxError: Illegal return statement popup.html:1 not sure how to handle?..
请用您的代码更新您的问题，我可以看看。
嗨，理查德 - 我已经用文件中当前的代码更新了我的问题。谢谢