How to run content.js script when appropiate DOM url change occurs?

167
May 10, 2018, at 2:28 PM

So the goal of my Chrome extension is to replace set of html elements with button in a specific Facebook tab. But whenever I switch out of that tab and then come back to the original the buttons are gone.

When I first load my page the buttons are there

I only intend for the buttons to appear when I'm on the "Campaigns" tab (And have them be there each time I go to the campaigns tab) however each time I go to another tab and then come back to the Campaigns tab my buttons disappear

I know the DOM changes when I switch between tabs but I don't know how to come back to run my content.js script again whenever I visit the "Campaigns" url tab due to a DOM change.

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

So how do I run my content.js each time there's the appropiate DOM url change?

Answer 1

You will need to bind a click event to the "Campaigns" tab. Let's Assume the "Campaigns" tab has an id "clickme".

So modify your content.js as below and try.

try {
    document.getElementById('clickme').addEventListener('click', function() {
        someFunc();
    }, false);
    someFunc();
} 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>");
        });
    });
}

I have tested the same code on my local machine with success and should work for you.

Rent Charter Buses Company
READ ALSO
Animation in AngularJS

Animation in AngularJS

I have an animation that changes margin-left of an element that makes some element "appear" and others "disappear"I had that code in JQuery, but I need to implement that in AngularJS 1

193
Convert jQuery bubble effect code into backbone

Convert jQuery bubble effect code into backbone

I have created bubble effect using jQuery but I want to make that in backbone nowI have included functions in my backbone file and call them only Error is bubble is undefined

163
How to get the id of this div based upon search the inner html value?

How to get the id of this div based upon search the inner html value?

How do I get the div id based upon the value "IBC-CW1 -DE-02A"

168
Angle value is not displaying

Angle value is not displaying

I am using cornerstone toolsAngle value is not displaying on some images

166