如何通过铬扩展名将某些文件插入某些网站？

Question

在我的铬扩展名，我有多个文件，注入脚本到网站，我想知道我如何可以注入一个文件为一个特定的网站。更好地解释

我的铬扩展名有一个文件注入到Github和另一个文件注入到一个不同的网站，我如何将每一个注入到自己的网站，没有有两个文件注入到每个网站。所以每个文件都会被注入到自己的网站中。

Answer 1

注入JavaScript文件可以通过https://developer.chrome.com/extensions/manifest中的content_scripts键中的条目完成，也可以通过chrome.tabs.executeScript()完成。

使用chrome.tabs.executeScript()

如果每次加载匹配的URL时都不需要注入脚本，则应该使用chrome.tabs.executeScript()。当与扩展的交互开始于用户单击browserAction或pageAction按钮时，情况尤其如此。

考虑到chrome.tabs.executeScript()是一个直接的JavaScript API调用，我将假设您了解如何根据来自tab.url属性的URL来选择注入什么。

注射stackContent.js可能看起来如下：

chrome.tabs.executeScript(tabId,{
    file: "stackContent.js"
}, result => {
    handleExecuteScriptAndInsertCSSErrors(tabId);
});

同时注入jquery.js和stackContent.js可能类似于：

chrome.tabs.executeScript(tabId,{
    file: "jquery.js"
}, result1 => {
    handleExecuteScriptAndInsertCSSErrors(tabId);
    chrome.tabs.executeScript(tabId,{
        file: "stackContent.js"
    }, result2 => {
        handleExecuteScriptAndInsertCSSErrors(tabId);
    });
});

您还应该检查chrome.runtime.lastError报告的错误。在Chrome和火狐WebExtensions中，我使用的一个函数是：

function handleExecuteScriptAndInsertCSSErrors(tabId) {
    if(chrome.runtime.lastError) {
        let message = chrome.runtime.lastError.message;
        let isFirefox = !!window.InstallTrigger;
        let extraMessage = tabId ? 'in tab ' + tabId + '.' : 'on this page.';
        if((!isFirefox && message.indexOf('Cannot access a chrome:') > -1) //Chrome
            || (isFirefox && message.indexOf('No window matching') > -1) //Firefox
        ) {
            //The current tab is one into which we are not allowed to inject scripts.
            //  This is most likely because we are injecting based on a action button
            //  click. You should disable the action button when a tab is active on
            //  which you can not perform the task that is expected by the user.
            let messageText= 'This extension, ' + chrome.runtime.id
                             + ', does not work ' + extraMessage;
            //alert(messageText); //Use for testing
            console.log(messageText);
        } else {
            //Report the error
            if(isFirefox) {
                //In Firefox, runtime.lastError is an Error Object including a stack trace.
                console.error(chrome.runtime.lastError);
            } else {
                console.error(message);
            }
        }
    }
}

在content_scripts中使用manifest.json键

在您的manifest.json中，您有一个content_scripts键，它描述总是注入到匹配URL中的脚本或CSS。如果您需要一个脚本，或者CSS是，那么您应该使用它--总是将注入到匹配的URL中。

虽然总是注入脚本可能更方便，但您应该认真考虑不这样做，除非需要这样做。如果您正在加载大型脚本和/或大量网站(例如，所有URL)，您尤其应该避免这样做。在大量网站上不加区别地注入脚本(包括库)可能会占用用户计算机上的大量资源，这可能会导致性能下降，影响用户体验。如果您需要从网站内部开始交互，请尝试加载一个较小的脚本，等待该交互开始，然后向您的后台脚本发送消息以注入您的其余功能。有时候，您确实需要随时加载脚本，但请尝试从用户的角度来考虑它，而不仅仅是编写扩展时方便的地方。作为使用content_scripts的过度注入脚本的一个例子，有人问了这个问题向每个https://页面注入78个不同脚本的扩展。

content_scripts键包含一个对象数组。每个对象描述一个注入指令。对象可以包含多个条件和多个文件，但每个条件都是全部或无；根据URL匹配与否，该对象中描述的所有文件要么被注入，要么没有。如果您希望一些文件被注入到某些URL中，而另一些文件被注入到其他URL中，那么您可以使用单独的对象来描述每个组。

将jquery.js和stackContent.js注入堆栈交换站点，将jquery.js和exampleContent.js注入example.com的示例如下：

"content_scripts": [
    {
        "matches": [
            "http*://*.askubuntu.com/*",
            "http*://*.mathoverflow.net/*",
            "http*://*.serverfault.com/*",
            "http*://*.stackapps.com/*",
            "http*://*.stackexchange.com/*",
            "http*://*.stackoverflow.com/*",
            "http*://*.superuser.com/*"
        ],
        "js": ["jquery.js", "stackContent.js"]
    },
    {
        "matches": ["http*://*.example.com/*"],
        "js": ["jquery.js", "exampleContent.js"]
    }
]

权限

根据您正在做的事情，您将需要权限来与您感兴趣和/或使用chrome.tabs的匹配URL进行交互。从上述例子来看：

"permissions": [
    "tabs",
    "http*://*.askubuntu.com/*",
    "http*://*.mathoverflow.net/*",
    "http*://*.serverfault.com/*",
    "http*://*.stackapps.com/*",
    "http*://*.stackexchange.com/*",
    "http*://*.stackoverflow.com/*",
    "http*://*.superuser.com/*",
    "http*://*.example.com/*"
]

Answer 2

使用Tamper猴子/ Greasemonkey扩展，头部如下所示：

// ==UserScript==
// @name         MTV Statistical Data For Tampermonkey & Greasemonkey
// @namespace    MTV_statistical_data
// @include     /^https?://(www\.)?mytrafficvalue\.com/shareholders\.html(\#marketplace)?$/
// @author       facebook.com/igor39
// @version      7.5
// @grant        none
// @description  Improving the user experience & provide more of statistics on the page www.mytrafficvalue.com/shareholders.html
// ==/UserScript==

示例：http://pastebin.com/Z4zq2h6Q