【发布时间】：2016-10-27 04:01:14
【问题描述】：
我正在开发一个 Chrome 扩展程序，其中有 popup.js、background.js 和 myscript.js（内容脚本）。每当我单击扩展图标时，它都会通过 browserAction 启动一个面板类型的新窗口。然后，当我单击面板窗口中的“记录”按钮时，popup.js 会向 background.js 传递一条消息：
popup.js：
$("#rcrd_btnr").click(function(ee)
{
alert('about to start recoding');
//send message from popup.js to background.js
chrome.runtime.sendMessage({from : 'record'});
'rcrd_btn_blue' is a button to stop the recording of events on page //
$("#rcrd_btn_red").hide();
$("#rcrd_btn_blue").show();
});
进一步，background.js 将消息传递给 myscript.js（内容脚本），
background.js：
if(request.from === 'record')
{
chrome.browserAction.setBadgeBackgroundColor({ tabId : actvTabId,color: "green" });
chrome.browserAction.setBadgeText({tabId : actvTabId,text: 'R'});
chrome.tabs.query({active:true}, function(tabs)
{
for(var i=0;i<tabs.length;i++)
{
if(tabs[i].selected == true)
{
try
{
//send to active tab to myscript from backgrund_record
chrome.tabs.sendMessage(tabs[i].id, {
from : 'btn_record',
win_id:windo.id
}, function(response) {});
}
catch(e)
{
alert('sending failed');
}
}
}
});
}
然后，在 myscript.js 中，我有两个事件：
$( "body" ).click(function( event ){...});
和
$("input").change(function(eventChange){...});
这些事件捕获活动选项卡上的任何“点击”和“用户类型”，并将它们发送回 background.js 并进一步发送到 popup.js：
myscript.js（内容脚本）：
if(message.from === 'btn_record')
{
$( "body" ).click(function( event )
{
try
{
//find element being clicked
var ele = document.getElementsByTagName(event.target.nodeName);
//sending message back to background.js
chrome.runtime.sendMessage({from : 'btn_record_myscript',msg : 'clicked'});
}
catch(e)
{
alert(e);
}
});
//change event for 'input type=text'
$("input").change(function(eventChange)
{
var ele = document.getElementsByTagName(eventChange.target.nodeName);
//sending message back to background.js
chrome.runtime.sendMessage({from : 'btn_record_myscript', msg :'typed'});
});
}
问题：
每当我单击“记录”按钮时，它都会成功捕获活动选项卡（我上次关注的选项卡）上的两个事件。但是，当我单击页面上的任何超链接时，页面会导航到同一选项卡上的另一个页面。然后我无法检测到新页面上的任何事件，即使它们位于同一个选项卡中。
如何重新注入内容脚本或保持注入？我被困在这个阶段真的很糟糕。
如果需要，我准备提供任何进一步的信息。
######UPDATE######
$$$$$ 也使用 JQUERY 文件 $$$$$
popup.js
var rcrd_btn_cntr=0;
$(document).ready(function() {
//listen mssage from record_button_red
$("#rcrd_btnr").click(function(ee)
{
//alert('about to start recoding');
//send message from record_to_background
chrome.runtime.sendMessage({from : 'record'});
// console.log(ws);
$("#rcrd_btnr").hide();
$("#rcrd_btnb").show();
});
//listen mssage from record_button_blue
$("#rcrd_btnb").click(function(ee)
{
alert('about to stop recoding');
$("#rcrd_btnb").hide();
$("#rcrd_btnr").show();
//send messagee from record_Button_stop
chrome.runtime.sendMessage({from : 'cancel'});
});
//Listens for message coming from background
chrome.runtime.onMessage.addListener(function (answer)
{
if(answer.from === 'b_r_m_background')
{
if(typeof(answer) != 'undefined')
{
var row = '<tr><td>'+answer.command+'<td>'+answer.target+'<td>'+answer.value;
$('#mytbl').append(row);
console.log(answer.msg)
//alert(answer.msg);
}
}
});
});
background.js
//create new window of type panel
var run =0;
var win_id;
var ifClosed=1;
var vid=0;
var xx ;
var actvTabId;
chrome.browserAction.onClicked.addListener(function(tab)
{
chrome.tabs.getSelected(null, function(tab) {
actvTabId = tab.id
});
chrome.windows.getCurrent(function(win)
{
xx = win;
if(run==0 && ifClosed ==1)
{
chrome.windows.create({ type:"panel",url: "index.html","width" : 400,"height" : 600}, function(win)
{
win_id = win.id;
// alert('creating '+win_id);
run++;
ifClosed=0;
});
}
else if(ifClosed == 0)
{
//alert('updating '+win_id);
chrome.windows.update(win_id, {focused: true});
}
});
});
//listen for a message coming from panel_window
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
if(request.from == 'cancel')
{
//sending to active tab (myscript) from back
//console.log('sending to myscript from back_cancel');
//console.log(sender);
chrome.tabs.query({active:true}, function(tabs)
{
for(var i=0;i<tabs.length;i++)
{
if(tabs[i].selected == true)
{
//chrome.tabs.update(tabs[i].id, {selected: true});
//send to active tab to myscript from back_cancel_button
chrome.tabs.sendMessage(tabs[i].id, {from : 'btn2_2_cancel'}, function(response) {});
}
}
});
//console.log('sent from back.js');
}
//listen incoming from panel_window_record_button
else if(request.from === 'record')
{
chrome.tabs.query({active:true}, function(tabs)
{
for(var i=0;i<tabs.length;i++)
{
if(tabs[i].selected == true)
{
//chrome.tabs.update(tabs[i].id, {selected: true});
//sending to active tab (myscript) from back
try
{
//send to active tab to myscript from backgrund_record
chrome.tabs.sendMessage(tabs[i].id, {from : 'btn_record',win_id:xx.id}, function(response) {});
}
catch(e)
{
alert('record background send failed');
}
}
}
});
}
//listen incoming from active tab from myscript for logging events
else if ( request.from =='btn_record_myscript' )
{
//send to panel window from background for logging events
chrome.runtime.sendMessage({from:'b_r_m_background',msg : request.msg});
}
});
//when panel_window is closed
chrome.windows.onRemoved.addListener(function (event)
{
chrome.browserAction.setBadgeText({tabId : actvTabId,text: ''});
ifClosed = 1;
run=0;
//alert(ifClosed);
//alert('window is closed');
chrome.tabs.query({active:true}, function(tabs)
{
for(var i=0;i<tabs.length;i++)
{
if(tabs[i].selected == true)
{
chrome.tabs.sendMessage(tabs[i].id, {from : 'btn2_2_cancel'}, function(response) {});
}
break;
}
});
});
myScript.js
var cntr=0;
var cbtr2=0;
var typed = '';
var tp='null';
var isFirstTime=0;
$(document).ready(function()
{
//listen for incoming from background
chrome.extension.onMessage.addListener(function (message,sender, sendResponse)
{
//listen incoming from cancel_button_background_panel_window
if(message.from === 'btn2_2_cancel')
{
//console.log('cencelling');
//in case of 'panel window close' or 'cancel button click' unbind all events from page
$('body').unbind('mouseover');
$('body').unbind('mouseout');
$('body').unbind('click');
$('body').unbind('keydown');
}
else if(message.from === 'btn_record')
{
current_loc = window.location.href;
$( "body" ).click(function( event )
{
//find element being clicked
var ele = document.getElementsByTagName(event.target.nodeName);
// alert('sending from click');
chrome.runtime.sendMessage({from : 'btn_record_myscript',msg : ele[0]});
});
//change event for 'input type=text'
var key_detect;
$("input").change(function(eventChange)
{
var ele = document.getElementsByTagName(eventChange.target.nodeName);
//key detect event
$("body").keydown(function (eventKey)
{
key_detect = eventKey.key;
});
//check if user has pressed enter
if(key_detect == 13 || eventChange.type == 'change')
{
typed = eventChange.target.value;
// alert('sending from type');
chrome.runtime.sendMessage({from : 'btn_record_myscript', msg : ele});
}
});
}
else
{
alert('error');
}
});
////////onMessage Listener ends///////////
});
index.html
<!doctype html>
<html lang="en">
<head>
<script src="jquery.js"></script>
<script src = "popup.js"></script>
<meta charset="utf-8">
<title>My AddOn</title>
<link rel="stylesheet" type="text/css" href="mycss.css"/>
</head>
<body >
<div>
<input type="button" value="Re" id ="rcrd_btnr" name="record" style="position:absolute;left:40%;text-align: center;background-color : red ;text-decoration: bold;font-size: 10px;padding:10px 10px;border: none;color: white;cursor: pointer;border-radius:100%"/>
<input type="button" value="Re" id ="rcrd_btnb" name="record" hidden style="position:relative;left:40%;text-align: center;background-color : blue ;text-decoration: bold;font-size: 10px;padding:10px 10px;border: none;color: white;cursor: pointer;border-radius:100%"/>
</div>
</body>
</html>
manifest.json
{
"name": "TestExtension",
"version": "1.0.0",
"manifest_version": 2,
"description" : "Test Descr.",
"icons": { "48": "bear.png"},
"browser_action": {
"default_icon": { "16": "bear.png", "32": "bear.png" },
"default_title": "Test Addon"
},
"permissions": ["tabs"],
"background": {
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["jquery.js","popup.js","myScript.js"]
}]
}
【问题讨论】：
-
内容脚本类似于页面的附加脚本（即使它在单独的环境中运行），因此当导航到其他页面时它被销毁时，它不会比页面本身寿命更长。您必须使用例如跟踪后台页面脚本中的 url 导航。 chrome.tabs.onUpdated。我相信 StackOverflow 上有很多这样的例子，所以祝你好运。或者也许有人会在这里发布一个定制的答案。
-
好的，谢谢...会试一试...并会通知您..
-
请edit 成为主题的问题：包括一个完整 minimal reproducible example 重复该问题。通常，包括一个manifest.json、一些后台和内容脚本。寻求调试帮助的问题（“为什么这段代码不工作？”）必须包括：►期望的行为，►特定问题或错误和►必要的最短代码重现它在问题本身。没有明确问题陈述的问题对其他读者没有用处。请参阅：“如何创建 minimal reproducible example”、What topics can I ask about here? 和 How to Ask。
-
具体来说：您没有显示内容脚本是如何或为何注入到页面中的。您要求我们向您展示如何“保持内容脚本注入”。即使这样做是不可能的（请参阅 wOxxOm 的评论），我们应该如何提出建议，以便从功能的角度来看，当您不首先显示内容脚本是如何注入时，您会得到一些接近的东西
-
在你的内容脚本中，为什么你有
var ele = document.getElementsByTagName(event.target.nodeName);？您的评论说这是为了获取被点击的元素。但是，您已经将该元素作为event.target。使用event.target.nodeName来获取您要从中找到event.target的节点列表是没有意义的。即使这样做确实有意义，您也永远不会使用ele变量，因此它没有必要存在。
标签： javascript jquery google-chrome google-chrome-extension