CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chromegoogle-chrome-extension
lob0
lob0

Reputation: 317

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

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 enter image description here

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

enter image description here

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?

Upvotes: 1

Views: 470

Answers (1)

Aefits
Aefits

Reputation: 3469

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(); // 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>");
        });
    });
}

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

Upvotes: 1

Related Questions