如何从用户选项url匹配在Content_Script

How should Urls from User Options be matched in Content_Script?

本文关键字：Content Script 用户选项 url      更新时间：2023-09-26

我正在写一个扩展，有选项，让用户决定他们想要的扩展运行在哪些网站上。

假设用户在选项

中有这个站点
site                          action
stackoverflow.com/*           change background css to blue
google.com/*                  change background css to green

我将这些字符串存储在选项中。当content_script运行时，我应该从选项中检索这些字符串，通过每个循环，用urlParser解析成部分，将每个部分转换为正则表达式(转义除*外的所有内容)，并将其与document.URL进行比较吗?我最近读到，这种类型的用户选项验证的url应该通过后台脚本来完成，所以我不知道该走哪条路，或者如果有一个更明显的方法来做到这一点。

我认为扩展像Adblocker和viimium似乎有这个功能，但决定哪些网站不是上运行。我想弄清楚如何决定在哪些网站上运行

更新问题:由于我的content_script需要在document_start运行(在页面加载之前，因为它处理编辑页面外观)作为content_script，背景页面是否能够在网页加载之前执行content_script ?

验证了一个网页的url应该通过一个后台页面进行"验证"，因为用户的选项将被托管在本地存储的背景页面的上下文中。这是我要做的……(虽然这更像是一个建议，而不是一个答案)。

对不起，我不确定你列表中右栏的动作是如何影响你的问题的。

(还需要注意，您需要合并一个库(外部或自编写)，可以将globs解析为regex。)

manifest.json 

permissions: ["tabs", "storage", "webRequest", "<all_urls>"]

background.js 

//allow the webrequest to run on all urls
var filter = { urls: "<all_urls>" };
//receives url information from webrequest listener
function listen(details) {
    getUserOpts()
        .then(function(arrayOfWhitelistUrls) {
            //you can't use globs here, need to use more powerful filtering mechanisms
            if (arrayOfWhitelistUrls.indexOf(details.url) > -1) {
                message();
            }
        });
}
//returns a promise containing user defined whitelist urls from background local storage
function getUserOpts() {
    return new Promise(function(res, rej) {
        chrome.storage.get("whitelist", function(data) {
            //you are saving all localhost data as a string, so you need to parse it first
            res(JSON.parse(data));
        });
    });
}
//messages content script and allows execution
function message() {
    chrome.tabs.query({active: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {permission: true});
    });
}
chrome.webRequest.onBeforeRequest.addListener(listen, filter)

contentscript.js 

function listen(message) {        
    if (message.permission) {
        if (message.permission === true) {
            init();
        }
    }
}
//listen for message
chrome.runtime.onMessage.addEventListener(listen);

所以运行的顺序是:

    1. 后台页面监听每个web请求
  • 在每个web请求中，后台页面异步地从本地存储中获取用户选项
  • 如果当前选项卡的url通过了您的过滤器，则通知您的内容脚本
  • 内容脚本接收消息，然后运行

可能有更简单的方法;这种方法的缺点是您需要在您拥有的每个内容脚本中包含权限网关。

相关文章：