我正在开发一个专用的chrome扩展程序，该扩展程序旨在从一个标签中提取数据，清除数据并在另一标签中填充表单数据。
逻辑流程如下：
后台脚本获取感兴趣的两个选项卡的tabid，并填充名为feedId和targetId的变量-background.js第7ff行
Background脚本侦听单击图标的指示-background.js第30行
后台脚本将一条消息发送到content.js脚本，以“获取数据”。 -background.js第38行
content.js接收到消息，并查找文本“ Rake the Data”，然后将数据rakes并将数据放入对象中-content.js第17ff行
content.js将消息发送回带有数据对象的后台脚本-content.js第49行
后台脚本接收带有对象的消息，然后对数据进行清理-background.js第43ff行
然后，后台脚本将清理后的数据（在脚本的此阶段仅发送一个元素）发送到targetId选项卡，以开始通过chrome.tabs.sendMessage-background填充字段.js第73ff
我希望“ Populate the Form”消息显示在content.js行的警报框中，但永远不会收到警报。
在此过程的最后阶段我做错了什么？
这是我的manifest.js：
{
"manifest_version":
2,
"name":
"Rake and Populate",
"version":
"0.3",
"description" :
"Rake data and populate a web form." ,
"permissions" : [
"tabs"
],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"content.js"
]
}
],
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"icons" : {
"16" : "rake16.png" ,
"32" : "rake32.png" ,
"48" : "rake48.png" ,
"128" : "rake128.png"
},
"browser_action" : {
"default_icon" : "rake16.png"
}
}
这是我的background.js脚本：
// Let define some parameters for the query
// These are the websites we want to work with
var players = ["*://*.domain-one.com/*", "*://*.domain-two/add.html*"];
feedId = targetId = 0;
// query the tabs to get the Ids of the two tabs of interest
chrome.tabs.query({url: players}, mytabs);
// take the returned data from the query and find the ID for each
function mytabs(myinfo){
var regex = /domain-one\.com/;
if (myinfo[0].url.match(regex)){
window.feedId = myinfo[0].id;
window.targetId = myinfo[1].id;
console.log('matched');
console.log(window.feedId);
} else {
window.feedId = myinfo[1].id;
window.targetId = myinfo[0].id;
};
};
// let's listen for the button in the addres bar being clicked
// when the button is clicked, the function "iChooseToRake" will get executed
chrome.browserAction.onClicked.addListener(iChooseToRake);
// This function is called when the button is onClicked
function iChooseToRake(tab) { //the tab object is passed into the function
//chrome.tabs.sendMessage(tab.id, "Rake the Data");
var rakeMessage = {message: "Rake the Data"};
chrome.tabs.sendMessage(tab.id, rakeMessage);
}
// Set up a listener to receive the message from the rake
// saying "I have the data"
chrome.runtime.onMessage.addListener(
function(unsanitizedData, sender){
// The data has been sent back in the object. Sanitize the data in the next few lines
// Let's get the zip from the end of the full address
// Check to see if there is a zip+4 code in the address
var regex = /[0-9]{5}-[0-9]{4}/; // does it match the pattern nnnnn-nnnn
if (unsanitizedData.physical_address_full.match(regex)){
var tempAddress = unsanitizedData.physical_address_full.match(regex)[0]; //populates tempAddress if matched
} else {
// We get here if the zip+4 matched failed.
// Check to see if there is a match for a 5 digit zip
var regex = /[0-9]{5}$/; //the pattern nnnnn at the end of the string
var tempAddress = unsanitizedData.physical_address_full.match(regex)[0]; //populates tempAddress if matched
console.log('I matched the 5 digit zip pattern: ' +tempAddress);
};
//pack the sanitized data into an object
var address = {
zip: tempAddress
};
sendNeededData(targetId, address);
});
// send the opject back to the correct tab
function sendNeededData(targetId, address){
// append the correct message in the object
address.message = "Populate the Form";
console.log(address);
chrome.tabs.sendMessage(targetId, address);
};
这是我的content.js脚本：
// Function to Convert text to Initial Caps
function titleCase(str) {
return str.toLowerCase().split(' ').map(function(word) {
return (word.charAt(0).toUpperCase() + word.slice(1));
}).join(' ');
}
// The content script listens for a message from the background script
// which tells the browser to rake the data
chrome.runtime.onMessage.addListener(messageRecieved);
function messageRecieved(txt, sender, sendResponse) {
alert(txt.message);
if (txt.message == "Rake the Data"){
console.log('I was just told to rake the data');
// Let's first read the data from the website
var owner_name = document.getElementsByTagName("li")[6].innerText.trim(); // Owner Name
owner_name = titleCase(owner_name); // Give it initial Caps
var owner_address_full = document.getElementsByTagName("li")[7].innerText.trim(); // owner_full_address
owner_address_full = titleCase(owner_address_full); // Give it initial Caps
var physical_address_full = document.getElementsByTagName("li")[10].innerText.trim(); // Situs Address Content:
physical_address_full = titleCase(physical_address_full); // Give it initial Caps
var area_land = document.getElementsByTagName("li")[11].innerText.trim(); // Land Area: e.g. 11,260 Sq.Ft.
var area_roof = document.getElementsByTagName("td")[7].innerText.trim(); // Gross Area: e.g. 2,709
var area_air = document.getElementsByTagName("td")[8].innerText.trim(); // Living Area: e.g. 1,952
// Now let's pack this data into an object and send it back to
// the background script to be processed and fed to the form
var parcelInfo = {
owner_name: owner_name,
owner_address_full: owner_address_full,
physical_address_full: physical_address_full,
area_land: area_land,
area_roof: area_roof,
area_air: area_air
};
console.log(parcelInfo);
// send the message with the data packed into the object named "parcelInfo"
chrome.runtime.sendMessage(parcelInfo);
};
};