Я работаю над частным расширением Chrome, которое предназначено для сбора данных с одной вкладки, их очистки и заполнения данных формы на другой вкладке.
Логика выглядит следующим образом:
Фоновый сценарий получает вкладки двух интересующих вкладок и заполняет переменные с именами feedId и targetId - background.js, строка 7ff
Фоновый сценарий прослушиваетпризнак того, что по иконке щелкнули - background.js строка 30
Фоновый скрипт отправляет сообщение в скрипт content.js на «Rake the Data».- background.js строка 38
content.js получает сообщение и ищет текст «Rake the Data», затем обрабатывает данные и помещает данные в объект - content.jsстрока 17ff
content.js отправляет сообщение фоновому сценарию обратно с объектом данных - строка content.js 49
Фоновый сценарий получает сообщение с объектом и затем обрабатывает данные - background.js, строка 43ff
Фоновый сценарий затем отправляет очищенные данные (я отправляю только один элементна этом этапе сценария) перейдите на вкладку targetId, чтобы начать процесс заполнения полей с помощью строки chrome.tabs.sendMessage - background.js 73ff
Я ожидаю сообщения "Заполните форму ", чтобы отобразить ее в поле предупреждения в строке 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);
};
};