2

マニフェスト2のガイドラインに従ったChrome拡張機能を作成しています。私はこれに何時間も取り組んできましたが、jqueryをWebページ内で実行して、ページ上の要素をアニメーション化する方法を理解できません。（具体的には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"]
    }
  ]

マニフェスト.jsonに送信し、myscript.jsの現在のページで実行するためのインジェクションコードを記述します

于 2012-11-22T01:55:11.830 に答える