Running jquery script called by context menu in chrome extension

Question

I am new to chrome extension development. The sample code that I have does not work correctly. Requirement: Execution of any jquery script (for example, $ ("body"). Hide ();) when the context menu button is pressed.

From code, only part of jquery does not work.

I have the following files:

manifest.json

 {
"manifest_version": 2,
"name": "jQuery DOM",
"version": "1",
"permissions": [
 "contextMenus","tabs","activeTab"
],
"background": {
 "scripts": ["jquery.min.js","sample.js"]
 },
 "description": "Manipulate the DOM when the page is done loading",
 "browser_action": {
 "name": "Manipulate DOM",
 "icons": ["icon.png"],
 "default_icon": "icon.png"
 },
 "content_scripts": [ {
  "js": [ "jquery.min.js", "background.js" ],
  "matches": [ "http://*/*", "https://*/*"],
    "run_at": "document_end"
 }]
 }

background.js

 $("body").append('Test');

I have icon.png in the folder and it loads well. jquery.min.js in the same folder

sample.js

            alert("Extension loaded");
            function genericOnClick(info, tab) {
            alert("Tab "+tab.id);
            chrome.tabs.executeScript(tab.id, {
                    file: "jquery.min.js",
                    allFrames: true
                },function(){
                alert("callback");
                  $("body").hide();
                });
            alert("Completed");
            $("body").hide();
            }
            var contexts = ["page"];

            for (var i = 0; i < contexts.length; i++) {
              var context = contexts[i];
              var title = "Test Page menu item";
              var id = chrome.contextMenus.create({"title": title, "contexts":[context],
                                                   "onclick": genericOnClick});
              console.log("'" + context + "' item:" + id);
            }

background.js works! All working alert files, but the .hide function from genericOnClick does not work. Even if I translate the code from sample.js to backgroud.js, this will not work. Could you tell me where I was wrong?

Answer 1

, script DOM ( script chrome.contextMenus). , script, . , :

• background.js content.js, , , background.js .
• ( browserAction.html background.js chrome.browserAction.onClicked.addListener - ).
• jquery , script ( ).
• background.js jquery , .
• executeScript tab - , .

:

manifest.json

{
  "manifest_version": 2,
  "name": "jQuery DOM",
  "version": "1",
  "permissions": [
    "contextMenus", "activeTab", "tabs", "http://*/", "https://*/"
  ],
  "background": {
    "scripts": [ "background.js" ],
    "persistent": false
  },
  "content_scripts": [ {
    "js": [ "content.js" ],
    "matches": [ "<all_urls>" ]
  }],
  "description": "Manipulate the DOM when the page is done loading"
}

background.js

function genericOnClick(info, tab) {
    chrome.tabs.executeScript(null,
                              {"file": "jquery.min.js"},
                              function() {
                                  chrome.tabs.sendMessage(tab.id,{"message":"hide"});
                              });
}


chrome.contextMenus.create({"title": "Test Page menu item",
                            "contexts":["page"],
                            "id":"contextId"});

chrome.contextMenus.onClicked.addListener(genericOnClick);

content.js

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg.message == 'hide') {
        $("body").hide();
    }
    sendResponse();
});

content.js, , , (+1 SSCCE). , , script sendMessage chrome.tabs.executeScript(null,{code:"$('body').hide();"});.