jQuery use in Google Chrome Extensions

Question

I am creating a Chrome extension that follows manifest 2 guidelines. I have worked hours on this and cannot figure out how to get jquery to run inside of the webpage so that I can use it to animate elements on the page. (Specifically using the slideUp() function)

Here is the manifest.json

"manifest_version": 2,
  "icons": {
    "16": "images/16.png",
    "25": "images/25.png",
    "32": "images/32.png",
    "48": "images/48.png",
    "128": "images/128.png"
  },
  "background": {
    "scripts": ["js/main.js", "js/jquery.min.js"]
  },
  "options_page": "options/options.html",
  "permissions": [
    "tabs",
    "unlimitedStorage",
    "https://maps.google.com/*",
    "https://maps.googleapis.com/*"
  ],
  "page_action": {
      "default_name": "Fullscreen",
      "default_icon": "images/128.png"
  }

Here is the main.js

// Called when the url of a tab changes.
function checkForValidUrl(tabId, changeInfo, tab) {
  // If the letter 'g' is found in the tab's URL...
  if (tab.url.indexOf('maps') > -1 && tab.url.indexOf('google') > -1) {
    // ... show the page action.
    chrome.pageAction.show(tabId);
  }
};

// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(checkForValidUrl);


chrome.pageAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(tab.id, {code: "document.getElementById('paneltoggle2').click(); $('gb').slideUp();"});
});

Here is the options.html

<html>
<head><title>My Test Extension Options</title></head>
<script src="options.js"></script>

<body>

Favorite Color:
<select id="color">
 <option value="red">red</option>
 <option value="green">green</option>
 <option value="blue">blue</option>
 <option value="yellow">yellow</option>
</select>

<br>
<div id="status"></div>
<button id="save" onclick="save_options();">Save</button>
</body>
</html>

Here is the options.js:

// Saves options to localStorage.
function save_options() {
  var select = document.getElementById("color");
  var color = select.children[select.selectedIndex].value;
  localStorage["favorite_color"] = color;

  // Update status to let user know options were saved.
  var status = document.getElementById("status");
  status.innerHTML = "Options Saved.";
  setTimeout(function() {
    status.innerHTML = "";
  }, 750);
}

// Restores select box state to saved value from localStorage.
function restore_options() {
  var favorite = localStorage["favorite_color"];
  if (!favorite) {
    return;
  }
  var select = document.getElementById("color");
  for (var i = 0; i < select.children.length; i++) {
    var child = select.children[i];
    if (child.value == favorite) {
      child.selected = "true";
      break;
    }
  }
}
document.addEventListener('DOMContentLoaded', restore_options);
document.querySelector('#save').addEventListener('click', save_options);

function insert() {
  $('#gb').after("<div id='hideGB' style='background: #DEDEDE; display:inline-block; border-bottom-left-radius:3px; border-bottom-right-radius:3px; padding:1px 10px 1px 10px; cursor:hand;'><div style='direction: ltr; text-align: left; height: 21px; overflow: hidden; vertical-align: middle; width: 21px; position: relative; display: inline-block;'><div id='hideGBimg' style='left: 0; top: -1329px; height: 2334px; position: absolute; width: 42px; content: url(http://ssl.gstatic.com/docs/common/jfk_sprite70.png);'>&nbsp;</div></div></div>");
  document.querySelector('#hideGB').addEventListener('click', change_hicon);
}
function change_hicon() {
  if (document.getElementById('hideGBimg').style.top == '-1329px') {
    document.getElementById('hideGBimg').style.top = '-1168px';
  }
  else if (document.getElementById('hideGBimg').style.top == '-1168px') {
    document.getElementById('hideGBimg').style.top = '-1329px';
  }
}

document.addEventListener('DOMContentLoaded', insert);

And here is the error I get:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

Thanks so much for your time and help,

Leinardo

Similar: http://stackoverflow.com/questions/11545743/chrome-extension-insert-content-script-on-browser-action — Aamir, Nov 22 '12 at 01:48

Sudarshan · Accepted Answer · 2012-11-22T02:56:45.767

3

you can not use inline script as per https://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution.

Can you eliminate inline script if written in options.html.

Also add

"content_scripts": [
    {
      "matches": ["http://www.someurl.com/*"],
      "js": ["jquery.min.js","myscript.js"]
    }
  ]

to your manifest.json and write your injection code for execution at current page in myscript.js

edited Nov 22 '12 at 02:56

answered Nov 22 '12 at 01:55

Sudarshan

18,140
7
53
61

I kind of guessed that from the error code. Also I need to execute this script inside of the current page not the options page. Thanks. – godismyjudge95 Nov 22 '12 at 02:52
then you have to use content scripts for execution in current page, i have updated my answer on how to'? – Sudarshan Nov 22 '12 at 02:56
I do not want to use content scripts because I need the match url to be dynamic. I need it to execute on any page that has google and maps in the url. Not just the list of urls that I can list by hand. – godismyjudge95 Nov 22 '12 at 03:24
Sure... for what its worth... I added my code to the question info. – godismyjudge95 Nov 22 '12 at 18:02

jQuery use in Google Chrome Extensions

1 Answers1