Chrome擴展程序：在新標籤中創建新標籤頁（chrome.tabs.create）並執行腳本...不工作:(

Question

我目前正在研究Google Chrome擴展程序，該擴展程序將允許Pinterest用戶輕鬆地將多個圖像一個頁面（一個當前不可用的功能）爲了達到這個目的，這個擴展有一個背景頁面和兩個內容腳本（contentScript1.js和contentScript2.js）爲了清晰起見，我會解釋我的擴展應該做什麼，然後詳細說明什麼問題引起我的分機的事件（簡化）順序是這樣的：

1. 用戶的網上衝浪，並決定他們想從當前選項卡針的形象，所以他們點擊我的分機的瀏覽器按鈕！
2. 當點擊瀏覽器按鈕時，background.js文件會向contentScript1.js發送一條消息，說「嗨，抓住此頁面上的每個img標記並允許用戶選擇'em'
3. contentScript1.js接收來自background.js的消息，該消息調用一個抓取所有圖像並向頁面附加提交按鈕的功能
4. 用戶單擊他們想要的圖像，然後單擊提交按鈕
5. 當點擊提交按鈕時，contentScript1.js發送消息給background.js
6. 當background.js從contentScript1.js收到消息時，它將用戶重定向到pinterest.com以允許f或釘住。 *注意：當選項卡是用pinterest.com的url創建的時，pinterest.com現在是活動選項卡（chrome.tabs.create的一個擴展默認值），
7. 在background.js創建新選項卡後，它在當前標籤中執行contentScript2.js，這是現在pinterest.com

好吧，一切工作正常和dandy除了contentScript2.js在任何CURRENT TAB執行。更具體地說，如果我現在打開我的瀏覽器，我的測試函數將在contentScript2.js中執行。但是，我的pinterest.com選項卡只在適當的時候創建（點擊提交按鈕時）。根據我的理解，我不應該使用background.js和contentScript2.js之間的消息傳遞，因爲chrome.tabs.create的默認設置。儘管如此，我嘗試使用消息傳遞，它仍然沒有工作☹

下面的代碼：

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"] 
    } 
    ] 
} 

和背景頁：

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'}); 
    }); 
}; 

第一內容腳本：

contentScript1.js 

function sendMess() { 
    chrome.extension.sendMessage({action : 'redirectImages'}, function(response) { 
    success = response.received; 
    console.log(success); 
    }); 
}; 


function appendImages() { 
    //...does stuff to make a pretty overlay and 
    //...grabs img tags, and displays for user to select to select 
    //...appends a submit button with class='submit-images' 
}; 

$(document).on('click', '#submit-images', function(e) { 
//..does magic that you need not worry about (i think?) 
sendMess(); 
}); 


chrome.extension.onMessage.addListener(function(request, sender, sendResponse) { 
    if (request === "displayImages") { 
    appendImages(); 
    } 
}); 

第二內容腳本

contentScript2.js 

    function tester() { 
    console.log('pinterest script injected'); 
}; 

var tester = tester(); 

Answer 1

contentScript2.js在任何當前TAB

這是因爲，在你的清單，你已經在你的content_scripts上<all_urls>加載包含它執行。看起來你想以編程方式決定何時運行該腳本，這正是executeScript用於。

只需從您的清單中刪除contentScript2.js，executeScript將按照您的預期進行注射。