chrome扩展程序无法使用内容脚本和其他方式从Google加载外部JavaScript

Jay*_*ran 5 javascript google-chrome-extension

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

我已经使用脚本标签在background.html中加载https://www.google.com/jsapi

这是我尝试使用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']);   
}
Run Code Online (Sandbox Code Playgroud)

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

  "content_scripts": [
    {
        "matches": ["<all_urls>"],
      "js": ["js/jquery-1.7.2.min.js", "js/myscript.js", "https://www.google.com/jsapi"]
    }
  ],
Run Code Online (Sandbox Code Playgroud)

它显示了一个错误

无法为内容脚本加载javascript https://www.google.com/jsapi

这是我的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"
  ]
}
Run Code Online (Sandbox Code Playgroud)

为此,我添加了https://www.google.com/jsapi以供您理解,并且我还测试了删除该内容。

所以我如何将javascript加载到文档上下文中。那就是每当网页被加载时...在这里,我专门为facebook加载。我仍然必须纠正indexof条件,因为它没有给出正确的结果,但这不是我所问问题的问题。

所以请建议我

Juz*_*Ali 4

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

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

或者通过 ajax 请求加载它,正如您在代码中注释掉的那样。

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

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