如何使用Background.js更新選項卡然後執行內容腳本？

我希望我的Chrome擴展程序能夠像這樣運行：如何使用Background.js更新選項卡然後執行內容腳本？

用戶單擊該圖標，即會顯示硬編碼的URL「www.example.com」。它不會打開新選項卡，而是更新窗口。然後，我想執行內容腳本並能夠在更新的頁面上提醒「正在工作」。

這裏是我到目前爲止有：

Background.js

chrome.browserAction.onClicked.addListener(function(activeTab) 
{ 
chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function 
(tabs) 
    { 

chrome.tabs.update({ 
url: "http://www.example.com/" 
}); 
}); 
function test() 
{ 
chrome.tabs.executeScript(null, {file: "myscript.js"}); 

} 




chrome.tabs.onUpdated.addListener(function(tabid, changeinfo, tab) { 
var url = tab.url; 
    if (url !== undefined && changeinfo.status == "complete") { 

    test(); 
} 
}); 
});

內容腳本

alert('working');

結果是奇數。當我點擊圖標時，它會提示example.com很好，但是有時候警報有效，有時不會。即使是更奇怪的，如果我雙擊它，它會更頻繁地工作，但如果我點擊它一堆，警報加起來，然後我一次獲得許多警報（我只是想要一個）。

來源

2017-08-24 DylanP

content.js可以設置一個全局變量，所以你可以檢查它跳過回注。
```
if (window[chrome.runtime.id]) { 
    alert('Oi! Reinjected.'); 
} else { 
    window[chrome.runtime.id] = true; 
    alert('Oi!'); 
} 

// do something 
```
根據您的內容腳本做什麼，你可以添加一個message listener，將處理來自你的背景頁面，而不是重新運行整個代碼的請求。

background.js檢查活動標籤已經被導航到感興趣的部位（或瀏覽到它），注入的內容腳本（註釋掉inject();跳過回注）。

檢查本身很簡單：注入一個內容腳本代碼來檢查全局變量。此代碼與給定頁面的其他內容腳本（isolated world）在相同的上下文中運行。

const SITE_URL = 'http://www.example.com'; 

chrome.browserAction.onClicked.addListener(tab => { 
    if (tab.url === new URL(SITE_URL).href) { 
    checkIfInjected(tab).then(tab => { 
     console.log('already injected in %d, reinjecting anyway', tab.id); 
     inject(tab); 
    }).catch(inject); 
    } else { 
    updateTabAndWaitForStart(tab.id, {url: SITE_URL}) 
     .then(inject); 
    } 
}); 

function checkIfInjected(tab) { 
    return runContentScript(tab.id, { 
    code: 'window[chrome.runtime.id]', 
    }).then(results => { 
    resolve(results[0] ? tab : Promise.reject(tab)); 
    }); 
} 

function inject(tab) { 
    return runContentScript(tab.id, { 
    file: 'content.js', 
    runAt: 'document_end', 
    allFrames: false, 
    }); 
} 

function runContentScript(tabId, options) { 
    return new Promise(resolve => { 
    chrome.tabs.executeScript(tabId, options, resolve); 
    }); 
}

// onUpdated listener waits for our tab to get an URL, detaches on success

function updateTabAndWaitForStart(tabId, options) { 
    return new Promise(resolve => { 
    chrome.tabs.update(tabId, options, newTab => { 
     chrome.tabs.onUpdated.addListener(
     function onUpdated(updatedId, info, updatedTab) { 
      if (updatedId === newTab.id && info.url) { 
      chrome.tabs.onUpdated.removeListener(onUpdated); 
      resolve(updatedTab); 
      } 
     } 
    ); 
    }); 
    }); 
}

manifest.json的應該包含您導航到和活動標籤的網站權限。

當然，像<all_urls>這樣的較大權限會包含這些內容，但確切列表的優勢在於，擴展程序網店中的安裝警告僅顯示網站。

*在網站URL權限是可選的（作用與每個API設計相同）。
最後/是強制性的（這是一條路徑）。
```
{ 
    "name": "test", 
    "version": "0.0.1", 
    "manifest_version": 2, 
    "description": ".............", 
    "background": { 
    "scripts": ["background.js"], 
    "persistent": false 
    }, 
    "browser_action": { 
    "default_title": "click me" 
    }, 
    "permissions": ["activeTab", "http://www.example.com/*"] 
} 
```

來源

2017-08-24 10:46:49 wOxxOm

如何使用Background.js更新選項卡然後執行內容腳本？

回答

相關問題