1

我对整个 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。

希望这是有道理的..

提前致谢。

更新：

弹出窗口.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>

内容脚本.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;
        }
});

清单.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"
    }
    ]
}
4

1 回答 1

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

于 2012-04-17T08:54:55.547 回答