将本地json文件加载到chrome扩展的内容脚本中

时间:2015-05-26 12:04:07

标签: json google-chrome google-chrome-extension xmlhttprequest content-script

我们都知道chrome扩展的内容脚本有局限性,但它也允许通过XMLHttpRequest解析json数据。我想知道怎么做?

这里我有json文件中的数据,假设它是

links.json

{"list1":[
  {"alt": "text1", "link": "img1.jpg"},
  {"alt": "text2", "link": "img2.jpg"},
  {"alt": "text3", "link": "img3.jpg"}
]}

内容脚本文件

的script.js

function dip() {

var JSONFile_url = chrome.extension.getURL("links.json");
// JSONFile_url is set to "chrome-extension://[extensionID]/links.json"

var linkarr;    

var JSON_req = new XMLHttpRequest();
JSON_req.overrideMimeType("application/json");
JSON_req.open('GET', JSONFile_url, true);
//JSON_req.setRequestHeader("Content-type", "application/json");

JSON_req.onreadystatechange = function()
{
    if( JSON_req.readyState == 4 )
    {
        linkarr = JSON.parse(JSON_req.responseText);    
  到目前为止,一切都很顺利。                   但是JSON.parse没有像预期的那样工作。                   linkarr仍然具有未定义的值。

    }
}
JSON_req.send();

//... some additional code goes here..

mm=document.createElement("div");
mm.appendChild(document.createTextNode(linkarr));
d.appendChild(mm);    //appends tag in html page

//... some additional code goes here..

}

dip();  //calling main function...

的manifest.json

{
  "manifest_version": 2,
  "name": "Simple content script extension",
  "version": "3.0",

  "icons": {
    "256": "icon.png"
  },

  "permissions": ["http://*.somehost.com/*"],

  "content_security_policy": "connect-src 'self'; script-src 'self'; object-src 'self'",
  "content_scripts": [
    {
      "matches": ["http://*.somehost.com/*"],
      "css": ["script.css"],
      "js": ["script.js"],
      "run_at": "document_end"
    }
  ],
  "converted_from_user_script": true,
  "web_accessible_resources": ["links.json"]
}

输出

Undefined

现在我有3个选项,

  1. 调试上面的代码以从json获取数组/对象列表 数据/文件。
  2. 在后台javascript页面中使用xhr代码。
  3. 制作一个javascript文件&将json数据存储到变量&将它包含在manifest.json下的content_scripts中以访问它 变量
  4. 请帮我在这里选择第一个选项。或任何其他工作方法都没问题。

      

    注意:此代码位于chrome扩展程序的内容脚本下。更多参考这个   https://developer.chrome.com/extensions/content_scripts   https://developer.chrome.com/extensions/contentSecurityPolicy

0 个答案:

没有答案