How to use jquery in to manipulate google chrome extension DOM elements?

Question

Hi so I am trying to create a google chrome plugin but and so I am actually trying to add jquery to make my life easier.

So I actually call another script file in my html like so

<script src="myScript.js"></script>

and I was wondering if it is possible to inject jquery into the script so I dont have to solely rely on pure javascript.

I have try to inject through the manifest file too like so:

{
  "manifest_version": 2,

  "name": "EXTENSION",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",
  "icons": {
      "128": "icons/icon128.png", 
      "48": "icons/icon48.png", 
      "16": "icons/button.png"
  },
  "browser_action": {
    "default_icon": "icons/Logo.png",
    "default_popup": "popup.html"
  },
  "content_scripts":[{
    "matches": ["http://*/*","https://*/*"],
      "js": ["jquery-3.1.1.min.js","myScript.js"]
  }],
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/",
    "bookmarks",
    "history",
    "tabs"
  ]
}

but i can seem to use jquery So the question is if i can do such a thing ,if so am i doing it correctly?

UPDATE

My HTML code is

<!doctype html>
<head>
        <!-- this is the jquery-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <!-- Core CSS file -->
        <link rel="stylesheet" href="assets/plugin/photoSwipe/photoswipe.css"> 

        <!-- Skin CSS file (styling of UI - buttons, caption, etc.)
             In the folder of skin CSS file there are also:
             - .png and .svg icons sprite, 
             - preloader.gif (for browsers that do not support CSS animations) -->
        <link rel="stylesheet" href="assets/plugin/photoSwipe/default-skin/default-skin.css"> 
        <!-- Core JS file -->
        <script src="assets/plugin/photoSwipe/photoswipe.min.js"></script> 

        <!-- UI JS file -->
        <script src="assets/plugin/photoSwipe/photoswipe-ui-default.min.js"></script> 

        <!--this is my own Style sheet-->
        <link rel="stylesheet" type="text/css" href="assets/css/style.css">


    </head>
    <body>
        <div id="NavDiv">
            <h4 id="NavTitle">
                <strong>
                    Navigation
                </strong>
            </h4>
            <nav id="Navbar">
                <ul>
                    <li><a><h4>Chat Bot</h4></a></li>
                    <li><a><h4>Recent</h4></a></li>
                    <li><a><h4>Settings</h4></a></li>
                </ul>
            </nav>
        </div>
        <div id="dimmer">

        </div>
        <div id="container">
            <div id="Taskbar">
                <div id ="HambugerMenu">
                    <img id ="TitleLogo" class="img-responsive" src="assets/image/menu.png">
                </div>
                <div id = "TitleLogoDiv">
                    <img id ="TitleLogo" class="img-responsive" src="assets/image/TitleLogo.png">
                </div>
                <h3 id = "TaskbarTitle">Recent</h3>
            </div>
                <div id="content">

                </div>
        </div>
        <script src="myScript.js"></script>
    </body>

and here's my script

function ShowMenu(){
    var NavDiv = document.getElementById("NavDiv");
    NavDiv.style.WebkitTransform = "translateX(0)";
    NavDiv.style.msTransform = "translateX(0)";
    NavDiv.style.transition = "translateX(0)";
    NavDiv.style.transition= "all 0.1s linear";
    var dimmer = document.getElementById("dimmer");
    dimmer.style.visibility = "visible"
    dimmer.style.transition = "opacity 0.5s";
    dimmer.style.WebkitTransition = "opacity 0.5s";
    dimmer.style.msTransition = "opacity 0.5s";
    dimmer.style.opacity = 0.5;
}

function HideMenu(){
    var dimmer = document.getElementById("dimmer");
    dimmer.style.transition = "opacity 0.1s";
    dimmer.style.WebkitTransition = "opacity 0.1s";
    dimmer.style.msTransition = "opacity 0.1s";
    dimmer.style.opacity = 0;
    var NavDiv = document.getElementById("NavDiv");
    NavDiv.style.WebkitTransform = "translateX(-13em)";
    NavDiv.style.msTransform = "translateX(-10em)";
    NavDiv.style.transition = "translateX(-10em)";
    NavDiv.style.transition= "all 0.3s linear";
    setTimeout(function(){
        dimmer.style.visibility = "hidden";
     }, 300);
}

document.getElementById("HambugerMenu").onclick = function(){
    ShowMenu();
};
document.getElementById("dimmer").onclick = function(){
    HideMenu();
};
console.dir($('#dimmer')); <-----this is to test if jquery is working or not

one way would be to copy paste the jquery directly as a one liner perhaps from the minimized jquery file. — mur, Mar 09 '17 at 12:47
this is the popup.html and ya i know you can check the console — Annonymous177, Mar 09 '17 at 13:25
So you use the same myscript.js both in the popup and as the content script? Why? Anyway, you'll have to include all other scripts from popup.html in content script declaration in `"js"`, obviously, since the script depends on them. Or you'll have to inject the html into the page for the script to work. And then you'll have the problem of style isolation which has several solutions here on StackOverflow. What are trying to accomplish? — wOxxOm, Mar 09 '17 at 13:28
*Please* don't load jQuery into **every** page (`content_scripts` with your `matches`) unless you **need** to. jQuery is 85kiB of minimized code. This is a significant burden with which to saddle *every single page*. What of those of us who have 100's of tabs open? While It is possible you really *need* to load jQuery, it is more likely that you are doing so for the convenience of saving a couple/few hundred characters in your own code by not using vanilla JavaScript. If that is the case ("to make my life easier"), doing so is a *very* poor trade-off from your user's point of view. — Makyen, Mar 09 '17 at 15:51
What *exactly* is shown in the [various appropriate consoles for your extension](http://stackoverflow.com/a/38920982/3773011) when you load and execute your extension? — Makyen, Mar 09 '17 at 15:54
@wOxxOm ok i am relatively new to google chrome extension in fact i just join in like yesterday So the script above is to have an navigation drawer affect like how android has it so I am actually not new to web designing and so i though maybe i can use jquery to ease me in doing such hing and other things as well since i am not very sure what the content script is for (i don't quite understand the google documentation of it) or the background script And so i presume you need to declare the script like so since goggle extension doesn't allow inline scripts hence the no jquery fustration — Annonymous177, Mar 09 '17 at 15:55
@Makyen so what you're saying that jquery is not a good trade off for optimization reason?? — Annonymous177, Mar 09 '17 at 15:56
Content script is injected alongside the webpage so it can't be the same as the popup script, which is a different page. Make sure to read the [extension architecture](https://developer.chrome.com/extensions/overview#arch) article. You probably need [web_accessible_resources](https://developer.chrome.com/extensions/manifest/web_accessible_resources), — wOxxOm, Mar 09 '17 at 16:12
@Annonymous177, jQuery is very useful in many situations. Historically, Its most important feature was cross browser compatibility, which has little/no relevance with a Chrome extension written to only work on Chrome. jQuery also provides some very convenient-for-the-code-author features. In most of the code we see posted in SO questions, people are literally including jQuery *only* to save themselves a couple hundred characters of JavaScript, with no other actual benefit (e.g. used just *once* instead of `document.querySelector()`). Relative to that, jQuery has a very significant cost. (cont) — Makyen, Mar 09 '17 at 17:17
@Annonymous177, You may be using jQuery to enable features which are difficult/unavailable in other ways. If so, then it is reasonable to use it (usually means you're using some plug-ins, in addition to jQuery). However, even when you are using it (+ plug-ins) to create your in-page UI, only the bare minimum needed for the user to *begin* interacting should be loaded. For example: no jQuery, just enough UI assets and code to display the initial UI element(s) and recognize that the user has *begun* to interact with your UI. Once the user has begun to interact, then load everything needed. — Makyen, Mar 09 '17 at 17:17
As already alluded to, loading the same main-function script file in multiple contexts/scopes (e.g. popup, content script, background page, etc.) is usually a Bad Idea™. Doing so causes numerous problems and is a common cause for the issues on SO, in this tag. Each context has its own constraints. Using different files to contain the code for each how you should organize your code. It does not mean that you can't have one of your own files, loading library functions, into multiple contexts. Just, if you do so, you need to keep careful separation of common functions vs. context specific code. — Makyen, Mar 09 '17 at 17:31
@Makyen ok noted i will suck it up and code it with just javascript — Annonymous177, Mar 10 '17 at 04:09
@Annonymous177, My suggestions don't mean that you can't have a reasonable amount of modular code that makes what you are writing easier/more compact. You can write helper functions which perform the subset of functionality that you actually use. You can roll you own ([this answer](http://stackoverflow.com/a/40570301/3773011) shows a very brief version of doing so). You can also look around for other light-weight alternatives (I really have not investigated the various off-the-shelf options sufficiently to make a suggestion). — Makyen, Mar 10 '17 at 04:38

score 0 · Answer 1 · answered Mar 09 '17 at 14:57

0

It depends where you want to use Jquery, if it is in the popup.html then you have to add it above your script declaration in popup.html.

<script src="jQuery.js"></script>

If you want to use it in background.html then you have to add it into your manifest (https://developer.chrome.com/extensions/event_pages).

"background": { "scripts": ["jquery.js"], "persistent": false },

If in a content script then you did fine adding it into your manifest to:

"content_scripts":[{ "matches": ["http://*/*","https://*/*"], "js": ["jquery-3.1.1.min.js","myScript.js"] }],

answered Mar 09 '17 at 14:57

Ivo

2,308
1
13
28

The OP already knows that as you can see from the posted code so the real problem is still unknown as it wasn't explained properly. – wOxxOm Mar 09 '17 at 15:23
Seeing his code with the script inject at the end it's most likely that it is in popup.html and if it is the case the answer is relevant as he has to add the script balise at the bottom of the popup.html before is myscript.js... but indeed clarificatoin would be better. That's also why I quoted all possibilities for others needs... – Ivo Mar 09 '17 at 15:58
Including jQuery was never a problem in the OP case so your answer is for a different question. – wOxxOm Mar 09 '17 at 16:13
Well if "$ is not defined" as OP said in one of his comments it probably means the problem is including Jquery. I started not that long ago with chrome extension and I had the same struggle not properly understanding what are (and where are) the content scripts/background/popup. – Ivo Mar 10 '17 at 19:59
My point was that your answer is too generic for this particular question, which has *many* problems besides referencing remote jquery in the popup html. We don't even know yet neither what really happens nor other specific details. – wOxxOm Mar 10 '17 at 20:08

How to use jquery in to manipulate google chrome extension DOM elements?

1 Answers1