為Chrome擴展添加事件監聽器以獲取新標簽和窗口

Question

Chrome擴展程序在新選項卡中打開，並在加載時獲取打開的窗口和選項卡的信息，但我必須刷新它才能打開任何新選項卡或窗口。

這是清單文件中的代碼：

 "background": {
    "page": "background.html",
    "persistent": true
    },
"content_security_policy": "script-src 'self' 'unsafe-eval' https://code.jquery.com; object-src 'self'",

"permissions": [
  "contextMenus",
  "notifications",
  "tabs",
  "clipboardWrite",
  "unlimitedStorage"
],
"content_scripts": [{
        "matches": ["*://*/*"],
        "js": ["jan13.js", "background.js"],
        "css": ["jan13.css"]
        }

background.html頁面調用兩個腳本“jan13.js”和“background.js”。

<!DOCTYPE html>
<html>
<head></head>
<body>
<script src="jquery.min.js"></script>
<script src="background.js"></script>
<script src="jan13.js"></script>
</body>
</html>

“background.js”文件只是在自己的選項卡中打開擴展名，如下所示：

chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': chrome.extension.getURL('popup.html'), 'selected': true});
});

然后“jan13.js”完成所有實際工作：

$(document).ready(function() {

 chrome.windows.getAll({populate:true},function(windows){

    for (i=0; i < windows.length; i++) {
        a = (i+1);

        $('<div/>', {
            id: 'win'+a,
        }).attr('class', 'box1').html("<h3>Window"+a+"</h3>").appendTo('.container');

        windows[i].tabs.forEach(function(tab){

            var favic = tab.favIconUrl;

            var link = $('<a>', {
                text:tab.title,
                href:tab.url,
                }); 
           link.attr("target", "_blank");
           $('#win'+a).append(link); 

            $(link).prepend($('<img>', {id:'favic', src: favic}));
        });
    };

    $('<div/>').attr('class', 'button').text("Toggle").appendTo('.box1');

    $('.button').click(function() {
        var b = $(this).parent().closest('div');
        $(b[0]).toggleClass("box1a");
    });       
  });
});

我已經嘗試將此代碼放在“background.js”和/或“background.html”中：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    $.getScript("jan13.js");
});
chrome.tabs.onCreated.addListener(function(tab) {     
    $.getScript("jan13.js");
});

但是我收到以下錯誤：

拒絕執行內聯腳本，因為它違反了以下內容安全策略指令：“script-src'self''unsafe-eval'https： //code.jquery.com ”。 可以使用'unsafe-inline'關鍵字，散列（'sha256-VCQyoq7QBv4UrBn0VODLZE8rJZdjIt7Kb3PziCSqIXM ='）或nonce（'nonce -...'）來啟用內聯執行。

我也經常收到這個錯誤：

未捕獲的ReferenceError：$未定義

但它並沒有阻止擴展運行。

當我嘗試將“background.js”和/或“jan13.js”放入清單時，如下所示：

"background": {
    "scripts": ["background.js", "jan13.js"],
    "persistent": true
    },

擴展程序根本不打開。 我點擊工具欄圖標，沒有任何反應。 這就是我把它放在“background.html”中的原因。 這對我來說似乎很復雜，但這是我讓它發揮作用的唯一方式。

最初的問題是如何添加eventListener以便擴展程序自動獲取任何新的選項卡或窗口？ 如果我刷新頁面，它可以工作。

編輯：將清單文件更改為：

{
"manifest_version": 2,
"name": "Session Sync",
"version": "0.1.0",
"description": "Sync browser sessions",
"author": "Mischa Bertrand-Chetty",
"browser_action": {
    "default_title": "Starting Session Sync..."
    },
"background": {
    "scripts": ["jquery.min.js","background.js", "jan13.js"],
    "persistent": true
    },
"content_security_policy": "script-src 'self' 'unsafe-eval' https://code.jquery.com; object-src 'self'",

"permissions": [
  "contextMenus",
  "notifications",
  "tabs",
  "clipboardWrite",
  "unlimitedStorage"
],
"content_scripts": [{
        "matches": ["*://*/*"],
        "css": ["jan13.css"]
        }
    ],
"incognito": "spanning"
}

好消息是我不再得到Reference錯誤了。 然而，最初的問題是，它不會監聽任何新標簽或窗口仍然存在。 我仍然需要刷新頁面才能獲得新的選項卡和窗口。

Answer 1

將注入DOM元素的代碼移動到命名函數中，以便可以從選項卡onCreated和onUpdated處理程序調用它，而不是重新加載腳本。 您可能也不想重新加載整個腳本並且每次都完全重新掃描窗口：您可能希望為每個更新/創建的選項卡執行一次。 然后您將不需要CSP規則，因為您不會重新加載腳本。

在background.js中，輸入你的函數和調用它的處理程序：

function scanTabs() {
  chrome.windows.getAll({populate: true}, function(windows) {
..etc..
}
$(document).ready(scanTabs);
chrome.tabs.onUpdated.addListener(scanTabs);
chrome.tabs.onCreated.addListener(scanTabs);

你根本不需要jan13.js 。

希望這足以讓你走上正軌。

為Chrome擴展添加事件監聽器以獲取新標簽和窗口

問題描述

1 個解決方案

解決方案1
0 2017-01-28 20:39:49

為Chrome擴展添加事件監聽器以獲取新標簽和窗口

問題描述

1 個解決方案

解決方案1 0 2017-01-28 20:39:49

解決方案1
0 2017-01-28 20:39:49