Расширения Google Chrome: как включить jQuery в программно внедренный скрипт контента?

Question

Я внедряю свой скрипт содержимого с фоновой страницы , когда пользователь нажимает кнопку действие браузера , например:

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript(null, { file: "content.js" });
});

Так как я могу получить доступ к jQuery из моего content.js? Я не вижу способа сделать это одновременно.

Answer 1

Как насчет:

chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
    chrome.tabs.executeScript(null, { file: "content.js" });
});

Вы можете скачать "jquery.js" здесь: http://jquery.com/download/

Answer 2

Как насчет добавления этого в файл манифеста

"content_scripts": [
    {
        "js": [
                "jquery.js", 
                "contentscript.js"
            ]
    }
],

Answer 3

ОБНОВЛЕНИЕ:

Выполнение второго сценария после того, как первый будет более точным с точки зрения порядка выполнения сценариев, result - массив результатов выполнения сценария в списке вкладок.1005 *

OLD:

Внедрение Jquery, сопровождаемого вашим сценарием, даст возможность доступа к Jquery в вашем сценарии.

chrome.tabs.executeScript(null, {file:'js/jquery-2.1.1.min.js'});
chrome.tabs.executeScript(null, {file:'js/myscript.js'});

Вы можете лучше контролировать, как должен вводиться скрипт, как описано в здесь .Специально свойство allFrames важно, если вы хотите внедрить скрипт во все фреймы в документе.Игнорирование будет производиться только в верхнем кадре.Так как это не упоминается в других ответах, думаю, это поможет вам.Скрипты можно всегда вводить, добавляя их в манифест, как описано здесь .

Answer 4

Поскольку у меня много сценариев с множеством зависимостей, я использую функцию concatenateInjection, которая принимает три параметра:

//id: the tab id to pass to executeScript
//ar: an array containing scripts to load ( index order corresponds to execution order)
//scrpt (opzional): the last script to execute (if not provided, than the last script is the last insert in previous array)

function concatenateInjections(id, ar, scrpt){
  var i = ar.length;
  var idx = 0;

  function inject(idx){
    idx++;
    if(idx <= i){
      var f = ar[idx-1];
      chrome.tabs.executeScript(id, { file: f }, function() {
          inject(idx);
      });
    }else{
      if(typeof scrpt === 'undefined') return;
      chrome.tabs.executeScript(id, { file: scrpt });
    }
  }
  inject(idx);
}

и пример использования:

// id is tab id

// sources: first execute jquery, than default.js and anime.js in the end
var def = [
  "lib/jquery-1.11.3.min.js", 
  "lib/default.js", 
  "injection/anime.js"
];

// run concatenate injections
concatenateInjections(id, def);

Думаю, что это возможнобыть полезным.

ОБНОВЛЕНИЕ

Версия с конкатом и замыканием (более эстетично):

function concatenateInjections(id, ar, scrpt){

  if( typeof scrpt !== 'undefined' ) ar = ar.concat([scrpt]);

  var i = ar.length;
  var idx = 0 ;

  (function (){
    var that = arguments.callee;
    idx++;
    if(idx <= i){
      var f = ar[idx-1];
      chrome.tabs.executeScript(id, { file: f }, function(){ that(idx);} );
    }
  })();

}

Answer 5

каждый раз, когда вы хотите динамически вставить jQuery, я рекомендую этот скрипт

У меня есть пользовательский поиск Chrome "$", который заменяет $ на

javascript:
var jq = document.createElement('script');
jq.onload = function(){};
jq.src = "https://code.jquery.com/jquery-2.1.1.min.js";
document.querySelector('head').appendChild(jq);

javascript: - это просто способ запуска javascript из строки URL

Я использую это на своей about:blank странице, когда пытаюсь быстро смоделировать какую-то ситуацию с CSS