2

我正在创建一个遵循清单 2 准则的 Chrome 扩展程序。我已经为此工作了几个小时，但无法弄清楚如何让 jquery 在网页内运行，以便我可以使用它来为页面上的元素设置动画。（具体使用slideUp()函数）

这是 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"
  }

这是 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();"});
});

这是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>

这是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);

这是我得到的错误：

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

非常感谢您的时间和帮助，

莱纳多

4

1 回答 1

3

您不能按照https://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution使用内联脚本。

如果用 options.html 编写，你能消除内联脚本吗？

还添加

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

到您的 manifest.json 并编写您的注入代码以在 myscript.js 的当前页面执行

于 2012-11-22T01:55:11.830 回答