Chrome扩展无法使用内容脚本和其他方式从谷歌加载外部JavaScript [英] chrome extension unable to load external javascript from google using content scripts and other ways

问题描述

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

此处是我在内容脚本
i中使用的代码尝试使用ajax和通用方法加载。

当我检查它时表示google未定义。

  / * 
 $ .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（）; 
}）
 
 
 
函数yes_it_is_facebook（）
 {
 // document.getElementsByName （'xhpc_message_text'）[0] .id ='facebook_tamil_writer_textarea'; 
 $ b // alert（document.getElementsByName（'xhpc_message'）。length）
 $ b 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] 
} 
]，
  

显示错误

无法加载javascript < a href =https://www.google.com/jsapi =nofollow> 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  
 $ b $content_scripts：[
 {
matches：[< all_urls>]，
js：[js / jquery-1.7 .2.min.js，js / myscript.js，https://www.google.com/jsapi] 
} 
]，
 
权限：[
http：// * / *，
https：// * / *，
contextMenus，
标签
] 
} 
  

我已添加 https://www.google.com/jsapi 以了解您的理解，并且我已测试过将其删除。

那么我如何将这个javascript加载到文档上下文中。那就是当一个网页被加载时......在这里我特别加载了Facebook。我仍然需要纠正indexof条件，因为它没有给出正确的结果，但这对我的问题来说并不是问题。

所以请给我建议。 / p>

解决方案

我似乎没有找到关于此的任何文档，但我认为您不能提及 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.

这篇关于Chrome扩展无法使用内容脚本和其他方式从谷歌加载外部JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！