Question

因此，我的Chrome扩展程序的目标是使用特定Facebook标签中的按钮替换html元素集。但每当我切换出那个标签，然后回到原来的按钮就不见了。

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

当我在＆＃34;广告系列＆＃34;时，我只打算出现按钮。标签（每次我转到广告系列标签时都会将它们放在那里）但每次我转到另一个标签然后返回“广告系列”标签时，我的按钮会消失

当我在标签之间切换时，我知道DOM会发生变化，但每当我访问＆＃34;广告系列＆＃34;我都不知道如何再次运行我的content.js脚本。由于DOM更改而导致的url选项卡。

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

那么每次有适当的DOM网址更改时，如何运行我的content.js？

Answer 1

您需要将点击事件绑定到＆＃34;广告系列＆＃34;标签。让我们假设＆＃34;广告系列＆＃34;标签有一个id＆＃34; clickme＆＃34;。

所以修改你的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>");
        });
    });
}

我已经在本地计算机上测试了相同的代码并且成功，并且应该适合您。

如果发生适当的DOM网址更改，如何运行content.js脚本？

1 个答案: