CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
RanRag
RanRag

Reputation: 49597

Manipulate DOM in chrome extension

I am trying to learn about chrome extensions but I am not able to understand how to manipulate DOM of a page using content_scripts.

manifest.json

{
    "name": "First",
    "version": "1.0",
    "manifest_version": 2,
    "description": "First extension",
    "background": {
        "scripts": ["test.js"]
    },

    "page_action": {

        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },

    "content_scripts": [ {
        "js": [ "jquery.min.js", "popup1.js"  ],
        "matches": [ "http://*/*", "https://*/*" ]

    } ],

    "permissions" : [
        "tabs",
        "http://*/*"
            ]
}

test.js

function check(tab_id, data, tab){

    if(tab.url.indexOf("google") > -1){
        chrome.pageAction.show(tab_id);
            }

};
chrome.tabs.onUpdated.addListener(check);

popup1.js

function myfunc(){

    var x = $('#options option:selected').text();
    $("body").append('Test');
    alert(x);
    //window.close();

}

$(document).ready(function(){

    $('#options').change(myfunc);

});

The above code/extension works fine because myfunc gets called but it doesn't inject Test into the body of google.com.

So, where am I going wrong in accessing/manipulating the DOM.

Upvotes: 2

Views: 12544

Answers (1)

Raghvendra Parashar
Raghvendra Parashar

Reputation: 4053

If you want to play with browser tab DOM on event of popup. In this case you have to pass a message to content script from background script, or inject JavaScript into content script : have a look

manifest.json

{
    "name": "First",
    "version": "1.0",
    "manifest_version": 2,
    "description": "First extension",
    "background": {
        "scripts": ["test.js"]
    },    
    "page_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },    
    "content_scripts": [ {
        "js": [ "jquery.min.js", "content_script.js"  ],
        "matches": [ "http://*/*", "https://*/*" ]    
    } ],

    "permissions" : [
        "tabs",
        "http://*/*"
            ]
}

content_script.js

function myfunc(){
    var x = $('#options option:selected').text();
    $("body").append('<div style="width:200px; height:200px; border: 1px solid red;"></div>');
}

$(document).ready(myfunc);

Now you will get A box with red border at the bottom of the page.

popup.js

function myfunc(){
    var x = $('#options option:selected').text();
    chrome.extension.sendMessage({sel_text: x});
}

$(document).ready(function(){
    $('#options').change(myfunc);
});

test.js (used in background)

chrome.extension.onMessage.addListener(
  function(request, sender, sendResponse) {
    appendTextToBody(request.sel_text);
  });

function appendTextToBody(text) {
  chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.executeScript(tab.id, {"code" : '$("body").append("Test : "'+text+');'}) ;
  });
}

function check(tab_id, data, tab){
    if(tab.url.indexOf("google") > -1){
        chrome.pageAction.show(tab_id);
    }
};
chrome.tabs.onUpdated.addListener(check);

Upvotes: 10

Related Questions