CODEWITHSUNDEEP
javascriptjquerygoogle-chromegoogle-chrome-extension
Sindar
Sindar

Reputation: 10839

Call Chrome.extension.sendRequest from a dynamically inserted js?

I'm currently trying to insert dynamically a JS block on a webpage using jQuery but it didn't work. I tried this : 

var body = $('body');

var injectJs = $('<script type=text/javascript>' +
'$(document).click(function() {' +
    'dropMenu("dropMenu1", 0);' +
'});');

body.append(injectJs);

EDIT : 16:26

I've succeed to insert the code by this way :

/* Importation de Tool.js */
var scriptImport = document.createElement('script');
scriptImport.type = 'text/javascript';
scriptImport.src= chrome.extension.getURL('js/Tool.js');
head.appendChild(scriptImport);

/* Injection du script onClick */                   
var script = document.createElement('script');
script.type = 'text/javascript';

script.innerHTML = "document.addEventListener('click', function(){ dropMenu('slideUp', 0); alert('TRY ME AGAIN'); });";

And dropMenu :

function dropMenu(dropMenuPage, marginLeft)
{
    var msg = "";
    msg = msg.concat(dropMenuPage, "|", marginLeft);

    chrome.extension.sendRequest({dropMenu : msg});
    alert('After send');
}

The problem is that the sendRequest is impossible from this page... Someone have an idea ?

Thanks in advance.

Upvotes: 0

Views: 840

Answers (5)

Sindar
Sindar

Reputation: 10839

// Importation of jQuery.js 
var scriptImport = document.createElement('script');
scriptImport.type = 'text/javascript';
scriptImport.src= chrome.extension.getURL('js/jquery.js');
head.appendChild(scriptImport);

// Injection of onClick script                  
var script = document.createElement('script');
script.type = 'text/javascript';

script.innerHTML = 
"document.addEventListener('click', function()" + 
    "{ if(document.getElementById('dropMenu')) {" +
        "$('#dropMenu').slideUp(800, function() {" +
           "$(this).remove();" +
    "});" +
                                                        "}});";

I've finally done this, it works :)

Upvotes: 0

serg
serg

Reputation: 111265

Why not use content scripts for this? Injecting script directly to the page is only required if you need to access js variables from the page. For your dropMenu() a content script should be enough.

You cannot use Chrome API inside injected js. You would need to also inject a content script, and using custom DOM events you would be able to communicate with it from your injected script. Then this content script would be able to call Chrome API and communicate with a background page. Sounds like a pain to me. I would suggest you go this route only if there is no other ways possible.

Upvotes: 0

Prakash
Prakash

Reputation: 6602

Use eval function, such as eg:

var body = $('body');
var injectJs = eval("$(document).click(function() {alert('hello')})");
body.append(injectJs);

Upvotes: 0

Val
Val

Reputation: 17522

I think its just your script stag isn't closed 

var b= $('body');

var injectJs = $('<script type=text/javascript> $(document).click(function() {alert("yes");});</script>');

b.append(injectJs);

Upvotes: 0

stef
stef

Reputation: 14268

You need a closing </script> at the end there...

Upvotes: 4

Related Questions