Question

我正在构建一个Chrome扩展程序，并且在我的contentScript中，我具有以下代码行：

a.setAttribute("style", "border: 1.5px dashed "+ color +"; padding: 5px; display: inline-block !important;");

在我的popup.html中，我得到了那些单选按钮：

  <div style="float: left; width: 60%;">
      <h3>Where should we find prerender?</h3>
      <input type="radio" id="radio_serp" name="radios" checked="checked" style="margin-left: 15px;"><span class="radio">Only SERP</span><br>
      <input type="radio" id="radio_ev" name="radios" style="margin-left: 15px; margin-top: 6px;"><span class="radio">Everywhere</span><br>
    </div>

我要确保如果用户选中第一个复选框，则该代码仅在Google SERP上有效。如果他选择第二个复选框，那么contentScript中的代码行将应用于每个域。

这可能吗？如何？谢谢

Answer 1

首先，将当前选定的选项存储在storage中（您需要具有“存储”权限）：

popup.js

let serpButton = document.getElementById("radio_serp");
serpButton.addEventListener("click", () => {
    if(serpButton.checked)
        chrome.storage.sync.set({
            mode: "serp_only"
        });
});

let otherButton = document.getElementById("radio_ev");
otherButton.addEventListener("click", () => {
    if(otherButton.checked)
        chrome.storage.sync.set({
            mode: "everywhere"
        });
});

您可以使用window.location检查内容脚本中的当前URL，并通过调用storage.get来检索模式：

chrome.storage.sync.get("mode", result => {
    let mode = result.mode;
    if (mode === "everywhere")
        run();
    else if (mode === "serp_only" && (location.host.startWith("google.") || location.host.startWith("www.google.")) && location.pathname.startsWith("/search")) {
        run();
}
});

function run(){
    a.setAttribute("style", "border: 1.5px dashed "+ color +"; padding: 5px; display: inline-block !important;");
}

如何使某些代码仅在某些特定域上运行

1 个答案: