I am currently working on a Google Chrome extension that will allow Pinterest users to easily link multiple images from a page (functionality that is not currently available). To achieve this, the extension has a background page and two content scripts (contentScript1.js and contentScript2.js). For clarity, I will explain what my extension should do, and then clarify what the problem is. My extension (simplified) order of events is as follows:
- The user browses the web pages and decides that they want to snap the image from the current tab, so they click the button of my browser extension!
- When the browser button is clicked, the background.js file launches a message in contentScript1.js to say “hey, grab every img tag on this page and allow the user to select“ em ”
- contentScript1.js receives a message from background.js that calls a function that captures all images and adds a submit button to the page
- The user clicks the desired image, and then clicks the submit button
- When the submit button is clicked, contentScript1.js calls the background.js message
- When background.js receives a message from contentScript1.js, it redirects the user to pinterest.com to allow binding. * Note: when a tab is created with the pinterest.com URL, pinterest.com is now the active tab (the default chrome extension is for chrome.tabs.create),
- After background.js creates a new tab, it will execute the contents of contentScript2.js on the current tab, which is now pinterest.com
Well, everything works fine and-dandy, except that contentScript2.js runs in ANY CURRENT TABLE. So more specifically, if I opened my browser right now, my tester function, which is located in contentScript2.js, would be executed. However, the pinterest.com tab is only created at the appropriate time (when the submit button is clicked). In my opinion, I do not need to use message passing between background.js and contentScript2.js due to the default settings of chrome.tabs.create. However, I tried using messaging, and it still didn't work ☹
Here is the code:
manifest.json: { "manifest_version" : 2, "name" : "Pin 'em", "description" : "Pin multiple images to different Pinterest boards in just two clicks", "version" : "1.1", "permissions" : [ "tabs", "<all_urls>" ], "browser_action" : { "default_icon" : "images/icon.png" }, "background" : { "page" : "background.html", "persistent" : false }, "content_scripts" : [ { "matches" : ["<all_urls>"], "js" : ["lib/jquery.min.js", "src/contentScript1.js", "src/contentScript2.js"], "css" : ["stylesheets/style.css"] } ] }
and background page:
background.js //when browser icon is clicked, current tab is selected //sends message to contentScript1.js chrome.browserAction.onClicked.addListener(function() { chrome.tabs.getSelected(null, function(tab) { chrome.tabs.sendMessage(tab.id, 'displayImages'); }); }); //when message 'redirectImages' is received //a new tab is created (url = http://pinterest.com) //extension executes contentScript2.js in pinterest.com chrome.extension.onMessage.addListener(function(request, sender, sendResponse) { if (request.action === 'redirectImages') { sendResponse({received : 'success'}); injectScript(); } }); function injectScript() { chrome.tabs.create({url : 'http://pinterest.com'}, function(tab) { chrome.tabs.executeScript(tab.id, {file: 'src/contentScript2'}); }); };
first content script:
contentScript1.js function sendMess() { chrome.extension.sendMessage({action : 'redirectImages'}, function(response) { success = response.received; console.log(success); }); }; function appendImages() {
second script content
contentScript2.js function tester() { console.log('pinterest script injected'); }; var tester = tester();