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

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

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

问题描述



我已阅读教程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