Как запустить скрипт content.js, когда происходит соответствующее изменение URL-адреса DOM?

Question

Таким образом, цель моего расширения Chrome - заменить набор HTML-элементов кнопкой на определенной вкладке Facebook. Но всякий раз, когда я переключаюсь с этой вкладки, а затем возвращаюсь к оригиналу, кнопки исчезают.

Когда я впервые загружаю свою страницу, там есть кнопки

Я хочу, чтобы кнопки появлялись только на вкладке «Кампании» (и они должны присутствовать при каждом переходе на вкладку «Кампании»), однако каждый раз, когда я перехожу на другую вкладку, а затем возвращаюсь к На вкладке "Кампании" мои кнопки исчезают

Я знаю, что DOM меняется, когда я переключаюсь между вкладками, но я не знаю, как вернуться, чтобы снова запустить мой скрипт content.js всякий раз, когда я посещаю вкладку URL-адреса "Кампании" из-за изменения DOM.

manifest.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"
    }

}

content.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>");
        });
    });

Background.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) {});
  });
}

Итак, как мне запускать свой файл content.js каждый раз, когда происходит соответствующее изменение URL-адреса DOM?

Answer 1

Вам нужно будет привязать событие клика к вкладке «Кампании». Предположим, вкладка «Кампании» имеет идентификатор «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>");
        });
    });
}

Я успешно протестировал тот же код на моей локальной машине и должен работать для вас.