Расширение Chrome не может загрузить внешний JavaScript из Google, используя скрипты содержимого и другие способы.

Question

Я пишу расширение Chrome, которое позволит транслитерировать для определенных текстовых полей в Facebook.

Я использовал вкладку скрипта для загрузки https://www.google.com/jsapi в background.html

вот код, который я использовал в скрипте контента Я пытался загрузить с помощью AJAX и общий способ.

когда я проверил, он сказал 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']);   
}

и у меня есть 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 https://www.google.com/jsapi для содержимого сценарий

вот мой манифест.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 в контекст документа? это когда веб-страница загружается ... здесь я специально загружаю для фейсбука. Тем не менее, я должен исправить условие indexof, потому что оно не дает правильного результата, но это не является проблемой в контексте моего вопроса.

поэтому, пожалуйста, предложите мне.

Answer 1

Похоже, я не нашел никакой документации по этому вопросу, но я думаю, что вы не можете упомянуть путь http:// в опции content_scripts.Возможный обходной путь может быть следующим:

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

Или загрузка его с помощью ajax-запроса, как вы закомментировали в своем коде.

Во-вторых, google.com/jsapi необходимо будет загрузить, прежде чем вы сможетеиспользуйте это в своем сценарии.В вашем манифесте вы сначала загружаете скрипт, а затем google.com/jsapi.

Дружеский совет: jQuery по умолчанию запрещает кэширование, добавляя метку времени в конце URL.Поскольку скрипт, который вы пытаетесь загрузить, вряд ли изменится за короткое время, вы можете передать cache: false в качестве опции для экономии времени загрузки.Проверьте эту страницу для получения дополнительной информации.Более того, вы можете связать скрипт с вашим пакетом, чтобы не было никакого запроса ajax, связанного с вашим расширением, что увеличит скорость вашего расширения.

Answer 2

Одна из самых больших проблем с google.load заключается в том, что он не может правильно загружать ресурсы после страницы полностью загруженной, потому что API использует document.write для внедрения скриптов / стилей , Чтобы решить эту проблему, необходимо пропатчить два метода:

(function(g) {
    var loader_d = g.loader.d,
        setOnLoadCallback = g.setOnLoadCallback;
    // Force not to use document.write when the document is loaded
    g.loader.d = g.loader.writeLoadTag = function(a, b) {
       loader_d(a, b, document.readyState === 'complete');
    };
    // Executes functions directly when page has loaded
    g.setOnLoadCallback = function(a_listener, b) {
        if (b || document.readyState !== 'complete') {
            setOnLoadCallback(a_listener, b);
        } else {
            // When the API is not loaded yet, a TypeError with google.
            //  will be thrown. Not a ReferenceError, because google.* is defined
            // Retry max *c* times.
            var c = 5;
            b = function() {
                try {
                    a_listener();
                } catch (e) {
                   if (e instanceof TypeError && (''+e).indexOf('google.')!=-1) {
                       if (c--) setTimeout(b, 2000);
                   }
                }
            };
            b();
        }
    };
})(google);

Теперь проблема 2. Сценарии содержимого выполняются в изолированной среде : любые свойства глобального пространства имен window недоступны. Таким образом, любые внедренные API-интерфейсы не видны для вашего скрипта содержимого.

Чтобы это исправить, см. Следующий ответ о переполнении стека: Создание расширения Chrome .

Answer 3

Это может помочь в понимании политик безопасности Chrome

СНТ

В нем говорится, что если вы присоединяете тег скрипта к странице (не скрипт всплывающего окна или контент), он загружается в контекст страницы, а не в ваше расширение. И скрипт из расширения не может общаться со скриптами страницы. Если вы посмотрите на скрипт страницы, вы увидите его там, но не в ваших скриптах расширения.

Я обнаружил это при попытке вставить скрипт Google API.

script = document.createElement('script');
script.src = "https://apis.google.com/js/client.js?onload=init";
(document.head||document.documentElement).appendChild(script);

Функция init определена в моем скрипте содержимого. Но скрипт Goolge API загружается как скрипт страницы. Так что, если я сделаю это

var script = document.createElement('script');

script.innerText = "function init(){ alert('hi'); }";
(document.head||document.documentElement).appendChild(script);

script = document.createElement('script');
script.src = "https://apis.google.com/js/client.js?onload=init";
(document.head||document.documentElement).appendChild(script);

Вызвана введенная функция инициализации, и я вижу предупреждение «привет». Не уверен, поможет ли это, но я решил, что запомню это для всех, кто борется с загрузкой API Google. Я обновлю этот ответ, если найду способ загрузить его.