1

I'm very much new to the whole chrome extensions world.

I've read through the tutorial "hello world" pages and tried to gain an understanding of content_scripts and background.html - but I may have overdosed and can't seem to find an answer to something I'm sure is a simple task.

In a tab a site contains the following Hidden HTML:

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

What I'm trying to figure out is how I can Display the

  • RefCode
  • ProductCode
  • Product Name

In a popup.html

I'm not looking at editing the html or manipulating it in any way.. it is strictly just displaying the hidden HTML - in an easy to read Popup.

Hope that makes sense..

Thanks in Advance.

UPDATE:

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"
    }
    ]
}
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 に答える