Chrome uzantısında jQuery nasıl kullanılır?

Bir krom uzantısı yazıyorum. Ve uzantımda kullanmak istiyorum jQuery. Herhangi bir arka plan sayfası kullanmıyorum , sadece bir arka plan komut dosyası .

İşte dosyalarım:

manifest.json

{
    "manifest_version": 2,

    "name": "Extension name",
    "description": "This extension does something,",
    "version": "0.1",

    "permissions": [
        "activeTab"
    ],

    "browser_action": {
        "default_icon": "images/icon_128.png"
    },

    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },

    "icons": {
        "16": "images/icon_16.png",
        "48": "images/icon_48.png",
        "128": "images/icon_128.png"
    }
}

Dosyam background.jssadece adlı başka bir dosya çalıştırıyorwork.js

// Respond to the click on extension Icon
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        file: 'work.js'
    });
});

Uzantımın ana mantığı içeride work.js. Bu soru için burada önemli olduğunu düşünmediğim içerikler.

Sormak istediğim şey, uzantımda jQuery'yi nasıl kullanabilirim. Herhangi bir arka plan sayfası kullanmadığım için. Ona jQuery ekleyemiyorum. Peki jQuery'yi uzantıma nasıl ekleyebilirim ve kullanabilirim?

JQuery'yi background.jsdosyadan work.js ile birlikte çalıştırmayı denedim .

// Respond to the click on extension Icon
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        file: 'thirdParty/jquery-2.0.3.js'
    });
    chrome.tabs.executeScript({
        file: 'work.js'
    });
});

Ve iyi çalışıyor, ancak bu şekilde çalıştırılmak üzere eklenen komut dosyalarının eşzamansız olarak çalıştırılıp çalıştırılmadığı konusunda endişelerim var. Cevabınız evet ise, o zaman work.js jQuery'den (veya gelecekte ekleyebileceğim diğer kitaplıklardan) önce bile çalışabilir.

Ayrıca, krom uzantımda üçüncü taraf kitaplıklarını kullanmanın doğru ve en iyi yolunun ne olduğunu bilmek isterim.

Jquery komut dosyanızı chrome-extension projenize ve backgroundmanifest.json dosyanızın bölümüne şu şekilde eklemelisiniz :

  "background":
    {
        "scripts": ["thirdParty/jquery-2.0.3.js", "background.js"]
    }

Bir content_scripts içinde jquery'ye ihtiyacınız varsa, bunu manifest'e de eklemeniz gerekir:

"content_scripts": 
    [
        {
            "matches":["http://website*"],
            "js":["thirdParty/jquery.1.10.2.min.js", "script.js"],
            "css": ["css/style.css"],
            "run_at": "document_end"
        }
    ]

Ben öyle yaptım.

Ayrıca, doğru hatırlıyorsam, arka plan komut dosyaları, üzerinden açabileceğiniz bir arka plan penceresinde yürütülür chrome://extensions.

Çok kolay, sadece aşağıdakileri yapın:

manifest.json dosyanıza aşağıdaki satırı ekleyin

"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",

Artık jQuery'yi doğrudan url'den yüklemekte özgürsünüz

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Kaynak: google doc

Ve iyi çalışıyor, ancak bu şekilde çalıştırılmak üzere eklenen komut dosyalarının eşzamansız olarak çalıştırılıp çalıştırılmadığı konusunda endişelerim var. Cevabınız evet ise, o zaman work.js jQuery'den (veya gelecekte ekleyebileceğim diğer kitaplıklardan) önce bile çalışabilir.

Bu gerçekten bir endişe olmamalı: belirli bir JS bağlamında çalıştırılmak üzere komut dosyalarını sıraya koyarsınız ve bu bağlam tek iş parçacıklı olduğu için bir yarış durumuna sahip olamaz.

Bununla birlikte, bu endişeyi ortadan kaldırmanın uygun yolu, aramaları zincirlemektir:

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        file: 'thirdParty/jquery-2.0.3.js'
    }, function() {
        // Guaranteed to execute only after the previous script returns
        chrome.tabs.executeScript({
            file: 'work.js'
        });
    });
});

Veya genelleştirilmiş:

function injectScripts(scripts, callback) {
  if(scripts.length) {
    var script = scripts.shift();
    chrome.tabs.executeScript({file: script}, function() {
      if(chrome.runtime.lastError && typeof callback === "function") {
        callback(false); // Injection failed
      }
      injectScripts(scripts, callback);
    });
  } else {
    if(typeof callback === "function") {
      callback(true);
    }
  }
}

injectScripts(["thirdParty/jquery-2.0.3.js", "work.js"], doSomethingElse);

Veya söz verildi (ve uygun imza ile daha uyumlu hale getirildi):

function injectScript(tabId, injectDetails) {
  return new Promise((resolve, reject) => {
    chrome.tabs.executeScript(tabId, injectDetails, (data) => {
      if (chrome.runtime.lastError) {
        reject(chrome.runtime.lastError.message);
      } else {
        resolve(data);
      }
    });
  });
}

injectScript(null, {file: "thirdParty/jquery-2.0.3.js"}).then(
  () => injectScript(null, {file: "work.js"})
).then(
  () => doSomethingElse
).catch(
  (error) => console.error(error)
);

Ya da neden olmasın, async/ await-ed daha net sözdizimi için:

function injectScript(tabId, injectDetails) {
  return new Promise((resolve, reject) => {
    chrome.tabs.executeScript(tabId, injectDetails, (data) => {
      if (chrome.runtime.lastError) {
        reject(chrome.runtime.lastError.message);
      } else {
        resolve(data);
      }
    });
  });
}

try {
  await injectScript(null, {file: "thirdParty/jquery-2.0.3.js"});
  await injectScript(null, {file: "work.js"});
  doSomethingElse();
} catch (err) {
  console.error(err);
}

Unutmayın, Firefox'ta browser.tabs.executeScriptbir Söz vereceği için kullanabilirsiniz .

Bahsedilen çözümlerin yanı sıra, ayrıca indirebilirsiniz jquery.min.js yerel olarak ve sonra kullanabilirsiniz -

İndirmek için -

wget "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"

manifest.json -

"content_scripts": [
   {
    "js": ["/path/to/jquery.min.js", ...]
   }
],

html'de -

<script src="/path/to/jquery.min.js"></script>

Referans - https://developer.chrome.com/extensions/contentSecurityPolicy

Benim durumumda, Belgeler Arası Mesajlaşma (XDM) ve sayfa yükleme yerine onclick Chrome uzantısını Yürütme yoluyla çalışan bir çözüm var.

manifest.json

{
  "name": "JQuery Light",
  "version": "1",
  "manifest_version": 2,

  "browser_action": {
    "default_icon": "icon.png"
  },

  "content_scripts": [
    {
      "matches": [
        "https://*.google.com/*"
      ],
      "js": [
        "jquery-3.3.1.min.js",
        "myscript.js"
      ]
    }
  ],

  "background": {
    "scripts": [
      "background.js"
    ]
  }

}

background.js

chrome.browserAction.onClicked.addListener(function (tab) {
  chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
  });
});

MyScript.js

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        if (request.message === "clicked_browser_action") {
        console.log('Hello world!')
        }
    }
);