javascript - chrome 扩展无法使用内容脚本和其他方式从谷歌加载外部 javascript

Question

我正在编写一个 chrome 扩展，它将为 facebook 中的特定文本框启用音译。

我已使用脚本选项卡加载 https://www.google.com/jsapi在 background.html 中

这是我在内容脚本中使用的代码我尝试使用 ajax 和通用方式加载。

当我检查它时说谷歌未定义。

/*
$.ajax({
  url: "https://www.google.com/jsapi",
  dataType: "script",

});
*/

var script = document.createElement("script"); 
script.setAttribute('type','text/javascript'); 
script.setAttribute('src','https://www.google.com/jsapi?'+(new Date()).getTime()); 
document.body.appendChild(script);

$(document).ready(function()
{
    alert(google)
    if(window.location.href.indexOf('facebook.com'))
        yes_it_is_facebook();
})



function yes_it_is_facebook()
{
//  document.getElementsByName('xhpc_message_text')[0].id = 'facebook_tamil_writer_textarea';

//  alert(document.getElementsByName('xhpc_message').length)

    google.load("elements", "1", { packages: "transliteration" });  
    google.setOnLoadCallback(onLoad);   
}

function onLoad()
{
    var options = {
                sourceLanguage:
                    google.elements.transliteration.LanguageCode.ENGLISH,
                destinationLanguage:
                    [google.elements.transliteration.LanguageCode.HINDI],
                shortcutKey: 'ctrl+g',
                transliterationEnabled: true
            };

    var control = new google.elements.transliteration.TransliterationControl(options);  
    control.makeTransliteratable(['facebook_tamil_writer_textarea']);   
}

我有 https://www.google.com/jsapi在 manifest.json 内容脚本数组中。

  "content_scripts": [
    {
        "matches": ["<all_urls>"],
      "js": ["js/jquery-1.7.2.min.js", "js/myscript.js", "https://www.google.com/jsapi"]
    }
  ],

显示错误

Could not load javascript https://www.google.com/jsapi for content script

这是我的 manifest.json

{
  "name": "Facebook Tamil Writer",
  "version": "1.0",
  "description": "Facebook Tamil Writer",
  "browser_action": {
    "default_icon": "images/stick-man1.gif",
    "popup":"popup.html"
  },

  "background_page": "background.html",

  "content_scripts": [
    {
        "matches": ["<all_urls>"],
      "js": ["js/jquery-1.7.2.min.js", "js/myscript.js", "https://www.google.com/jsapi"]
    }
  ],

  "permissions": [
    "http://*/*",
    "https://*/*",
    "contextMenus",
    "tabs"
  ]
}

因为我添加了https://www.google.com/jsapi为了您的理解，我也测试了删除它。

那么我如何将该 javascript 加载到文档上下文中。那就是加载网页的时候...这里我专门为 facebook 加载。我仍然必须更正 indexof 条件，因为它没有给出正确的结果，但这不是我问题上下文的问题。

所以请给我建议。

Answer 1

我似乎没有找到与此相关的任何文档，但我认为您不能在 content_scripts 选项中提及 http:// 路径。可能的解决方法是:

$('head').append("<script type='text/javascript' src='http://google.com/jsapi'>");

或者按照您在代码中注释掉的方式通过 ajax 请求加载它。

其次，必须先加载 google.com/jsapi，然后才能在脚本中使用它。在您的 list 中，您首先加载脚本，然后加载 google.com/jsapi。

一个友好的建议:默认情况下，jQuery 不允许通过在 url 末尾附加时间戳来进行缓存。由于您尝试加载的脚本不太可能在短时间内发生变化，您可以传递 cache: false 作为节省加载时间的选项。查看this page获取更多信息。更好的是，您可以将脚本与您的包捆绑在一起，这样就没有与您的扩展关联的 ajax 请求，这将增加您的扩展的速度。