时间戳

首页 > 解决方案 > 发生适当的 DOM url 更改时如何运行 content.js 脚本？

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

问题描述

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

当我第一次加载我的页面时，按钮就在那里 在此处输入图像描述

我只打算在“广告系列”标签上显示按钮（并且每次我进入广告系列标签时都让它们出现）但是每次我转到另一个标签然后返回广告系列标签时我按钮消失

在此处输入图像描述

我知道当我在选项卡之间切换时 DOM 会发生变化，但是由于 DOM 更改，每当我访问“Campaigns”url 选项卡时，我不知道如何重新运行我的 content.js 脚本。

清单.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 呢？

标签： javascriptjqueryhtmlgoogle-chromegoogle-chrome-extension

解决方案

您需要将点击事件绑定到“广告系列”选项卡。让我们假设“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>");
        });
    });
}

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

推荐阅读