how to run custom function on an open tab within Chrome Extension using jQuery

Question

I have a chrome extension that should manipulate the content of the currently open page (tab).

To take user input I use popup.html with a few input fields. Input from this fields is transmitted to the page (content script) which executes the desired transformation.

The problem is that I cannot run a function which I define in a content script. I tried to define function in a content_script.js itself and tried to insert it into the page via

var new_script2 = document.createElement('script');
code = "function definition goes here";
new_script2.text = code;
document.getElementsByTagName('head')[0].appendChild(new_script2);

nothing works. Plus I also cannot see the jQuery objects in a content_script.js even if I insert them in a manifest as suggested here

Any ideas how to run custom function on an open tab within Chrome Extension after the event was generated in a popup???

[UPDATE]

Below is what I have now and I solved my problem, the key is to be careful with message passing and functions initialization.

My manifest looks as follows

{
  "background_page": "background.html",
  "name": "some",
  "version": "0.1",
  "description": "some",
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "some",
    "popup": "popup.html"
  },
   "content_scripts": [ {
      "js": [ "javascripts/jquery-1.5.min.js", "javascripts/jquerylatest.js", "javascripts/content_script.js" ],
      "matches": [ "http://*/*", "https://*/*", "file://*/*" ],
      "run_at": "document_end"
   } ],
   "permissions": [ "tabs", "http://*/", "https://*/" ]
}

In popup.html I create a button and assign an event handler that sends messages to the backgroundpage.html

    $( "#create-user" )
        .button()
        .click(function() {
            //~ alert(allFields.val());
            //~ var annot = [attrValue, attrType];
            chrome.tabs.getSelected(null, function(tab) {               
            chrome.tabs.sendRequest(tab.id, {"attrValue" : attrValue.val(), "attrType" : attrType.val()}, 
            function readResponse() { console.log("got response in popup");} );
            window.close();
            });
        });

In backgroundpage I listen to messages send by a popup

var tab_id = -1;

chrome.tabs.getSelected(null, function(tab) {
        tab_id = tab.id;
    });

chrome.extension.onRequest.addListener(function(request, sender) {
    console.log("in bg.js addlistener method " + request);
        chrome.tabs.executeScript(tab_id, {file:"javascripts/content_script.js"});
    });

and redirects them further to the content script to use for page modification. content_script listens as follows:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
//do your manipulation here
});

Finally, don't forget to include jquery libraries into the javascripts/ subfolder of your extension.

Answer 1

From what I understand, injected Javascript functions don't get saved, unless they're attached to an event (like a keypress or an onclick). (someone please correct me if I'm wrong!)

Instead, I'd suggest using chrome.tabs.executeScript(tabId, details) and writing out the code within the details.code, or having the code be in another content script .js file via details.file that you could inject.

But again, injected functions will be removed once the script is finished.
So put your function and other code in a content script, inject it, and your content script can use its function(s) until the script finishes.