且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-12-05 18:51:16

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



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

或者通过ajax请求加载它,因为您已经在代码中注释掉了。



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

一个友好的建议:
默认情况下,jQuery不允许通过在url结尾附加时间戳来缓存。由于您要加载的脚本在短时间内不可能发生变化,因此您可以传递 cache:false 作为保存加载时间的选项。查看此页面获取更多信息。
更好的是,您可以将脚本与您的软件包捆绑在一起,这样就不会有与您的扩展相关的Ajax请求,这会增加您的扩展速度。


I am writing a chrome extension which will enable transliteration for specific textboxes in facebook.

I have used the script tab to load https://www.google.com/jsapi in background.html

here is the code i have used in a content script i tried to load using ajax and the generic way.

when i checked it said google undefined.

/*
$.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']);   
}

and i have https://www.google.com/jsapi in manifest.json content script array.

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

it showed an error

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

here is my 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"
  ]
}

in that i have added https://www.google.com/jsapi for your understanding and i have tested removing that also.

so how do i load that javascript into a document context . that is when ever a web page is loaded... here i specifically loading for facebook. still i have to correct the indexof condition because it is not giving the proper result but that is not the problem to this context of my question.

so please suggest me.

I don't seem to find any documentation regarding this but I think you cannot mention an http:// path in content_scripts option. A possible work around could be this:

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

Or loading it via ajax request as you have commented out in your code.

Secondly google.com/jsapi will have to be loaded before you can use it in your script. In your manifest you are loading your script first and then google.com/jsapi.

A friendly advice: jQuery by default disallows caching by appending timestamp at the end of url. Since the script you are trying to load is not likely to change in short durations you can pass cache: false as an option for saving load time. Check out this page for more info. Better yet you can bundle the script with your package so that there is no ajax request associated with your extension, that will add to the speed of your extension.