在弹出窗口中显示源代码的特定行 [英] Display Specific Line Of Source Code in Popup
问题描述
我已阅读教程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
}
]
}
查看文档： http://code.google.com/chrome/extensions/messaging.html
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
这篇关于在弹出窗口中显示源代码的特定行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
