javascript - 如何在发生适当的 DOM url 更改时运行 content.js 脚本？

Question

所以我的 Chrome 扩展的目标是用特定 Facebook 选项卡中的按钮替换一组 html 元素。但每当我切换出该选项卡然后返回原始选项卡时，按钮都消失了。

当我第一次加载我的页面时，按钮就在那里

我只打算让按钮在我位于“广告系列”选项卡时出现(并且每次我转到“广告系列”选项卡时它们都在那里)但是每次我转到另一个选项卡然后返回广告系列标签我的按钮消失了

我知道当我在选项卡之间切换时 DOM 会发生变化，但由于 DOM 更改，我不知道每当我访问“广告系列”url 选项卡时如何返回以再次运行我的 content.js 脚本。

list .json

{
    "manifest_version": 2,
    "name": "YEP",
    "description": "Feel it",
    "version": "3.1",

    "permissions": [
      "activeTab",
      "tabs"
    ],

    "content_scripts": [ 
        {
    "matches": ["https://business.facebook.com/adsmanager/manage/campaigns*"],
    "run_at": "document_end",
    "all_frames": true,
    "js": [ "jquery.min.js", "FBStuff.js", "content.js" ]
    }

],


    "background": {
        "scripts": ["FBStuff.js", "background.js"]
    },

    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "FBStuff.html",
        "default_title": "This is happening"
    }

}

内容.js

//get reporting ends column to change it into buttons
var botme = $("._643l:contains('Reporting Ends')");
botme.text("Add?");

//Hacky code to change a column to buttons
var d = new Date();
var year = d.getFullYear();

//make a button and replace the date with it
var boxspot = $("._1b33:contains("+year+")");

//button in its place
    boxspot.replaceWith('<button id="OpenDialog">Bot me!</button><div id="dialog"></div>');

    $(document).ready(function () {

        $("#OpenDialog").click(function () {
            var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
            var $w = $(w.document.body);
            $w.html("<textarea>It works!</textarea>");
        });
    });

背景.js

var rxLookfor = /^https?:\/\/(www\.)?business\.facebook\.(com|\w\w(\.\w\w)?)\/.*;
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (rxLookfor.test(changeInfo.url)) {
        chrome.tabs.sendMessage(tabId, 'url-update');
    }
});


chrome.pageAction.addListener(function (tab) {
    //fired when the user clicks on the ext's icon
    sendMessage();
});
function sendMessage() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, {action: "pageToSpeech"}, function(response) {});
  });
}

那么，每次出现适当的 DOM url 更改时，我该如何运行我的 content.js？

Answer 1

您需要将点击事件绑定(bind)到“广告系列”选项卡。假设“Campaigns”标签有一个 ID“clickme”。

所以修改你的 content.js 并尝试。

try {

    document.getElementById('clickme').addEventListener('click', function() {
        someFunc();
    }, false);

    someFunc(); // calling this function so it runs when content script is injected.

} catch (e) {

};

function someFunc() {
    //get reporting ends column to change it into buttons
    var botme = $("._643l:contains('Reporting Ends')");
    botme.text("Add?");

    //Hacky code to change a column to buttons
    var d = new Date();
    var year = d.getFullYear();

    //make a button and replace the date with it
    var boxspot = $("._1b33:contains("+year+")");

    //button in its place
    boxspot.replaceWith('<button id="OpenDialog">Bot me!</button><div id="dialog"></div>');

    $(document).ready(function () {

        $("#OpenDialog").click(function () {
            var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
            var $w = $(w.document.body);
            $w.html("<textarea>It works!</textarea>");
        });
    });
}

我已经在我的本地机器上成功测试了相同的代码，应该适合你。