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

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

关注
发信
关注(28)粉丝(399)

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

本文介绍了在弹出窗口中显示源代码的特定行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



我已阅读教程hello world页面并尝试了解content_scripts和background.html - 但我可能过量了，似乎无法找到答案，我敢肯定这是一项简单的任务。



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

 < div class =XYZ> 
< input id =form_IDtype =hiddenvalue =REF_CODE＃Product_CODE＃Product Name＃> 
< / div>

我想知道的是如何显示


  • RefCode

  • ProductCode

  • 产品名称


在popup.html



中，我没有在编辑html或以任何方式处理它。 。它严格地只显示隐藏的HTML - 在一个容易阅读的Popup。



希望这是有道理的..



感谢提前。



更新：

Popup.html 

 < html> 
< head> 
< script> 
函数readIds（）{
 console.log（'发送请求到内容脚本'）; 
 document.getElementById（response）。innerText =正在请求...; 
 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;>点击阅读ID< / a> 
< pre id =response>< / pre> 
< / body> 
< / html>

Content_script.js 

  //添加一个监听器从后台获取消息，弹出
 chrome.extension.onRequest.addListener（function（request，sender，sendResponse）{
 switch（request.cmd）{ 
 casereadIds：
 console.log（readIds，request）; 
 document.getElementById（productID）; 
 sendResponse（{refCode：1，productCode： 2，productName：3}）; 
 break; 
} 
}）;

manifest.json 

  {
 //必需的
name：WP Debug，
version：0.0.1，
 
 / /推荐
description：纯文本描述，
图标：{48：icon.png}，
 //default_locale：en ，
 
 //选择一个（或没有）
browser_action：{
default_icon：icon.png，//可选
default_title ：WP调试，//可选;在工具提示中显示
popup：popup.html
}，
 
permissions：[http：// * /，https：// * /，tabs]，
 
content_scripts：[
 {
matches：[http：// * / *，https：// * / *]，
js：[content_script.js]，
run_at：document_idle
} 
] 
}


解决方案

您的弹出窗口需要发送消息到您的内容脚本，然后收集隐藏的字段信息并将回复发送回弹出窗口。



以下是一个示例：



popup.html 

 < html> 
< head> 
< script> 
函数readIds（）{
 console.log（'发送请求到内容脚本'）; 
 document.getElementById（response）。innerText =正在请求...; 
 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;>点击阅读ID< / a> 
< pre id =response>< / pre> 
< / body> 
< / html>

content_script.js 

  //添加一个监听器从后台获取消息，弹出
 chrome.extension.onRequest.addListener（function（request，sender，sendResponse）{
 switch（request.cmd）{ 
 casereadIds：
 console.log（readIds，request）; 
 // TODO：获取从页面
发送的实际值//例如document.getElementById（ someid）等
 sendResponse（{refCode：1，productCode：2，productName：3}）; 
 break; 
} 
}）;

mainfest.json 

  {
 //必填
name：Foo Extension，
version：0.0.1，
 
 / /推荐
description：纯文本描述，
图标：{48：foo.png}，
 //default_locale：en ，
 
 //选择一个（或没有）
browser_action：{
default_icon：Foo.png，//可选
default_title ：Foo Extension，//可选;在工具提示中显示
popup：popup.html
}，
 
permissions：[http：// * /，https：// * /，tabs]，
 
content_scripts：[
 {
matches：[http：// * / *，https：// * / *]，
js：[content_script.js]，
run_at：document_idle
} 
] 
}

查看文档：


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"
    }
    ]
}
解决方案

Your popup needs to send a message to your content script which then gathers up the hidden field info and sends the response back to the popup.

Here is an example:

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"
    }
    ]
}

See documentation: http://code.google.com/chrome/extensions/messaging.html

这篇关于在弹出窗口中显示源代码的特定行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-05 19:03
Powered by LMLPHP ©2024 在弹出窗口中显示源代码的特定行 0.040511