javascript - disable - csp extension

¿Cómo usar jQuery en la extensión de Chrome?

Question

Estoy escribiendo una extensión de cromo. Y quiero usar jQuery en mi extensión. No estoy usando ninguna página de fondo, solo una secuencia de comandos de fondo.

Aquí están mis archivos:

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"
}
}

Mi archivo background.js solo ejecuta otro archivo llamado work.js

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

La lógica principal de mi extensión está dentro de work.js El contenido del cual no creo importa aquí para esta pregunta.

Lo que quiero preguntar es cómo puedo usar jQuery en mi extensión. Ya que no estoy usando ninguna página de fondo. No puedo simplemente agregarle jQuery. Entonces, ¿cómo puedo agregar y usar jQuery en mi extensión?

Intenté ejecutar jQuery junto con mi work.js del archivo background.js .

// 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''
});
});

Y funciona bien, pero me preocupa si los scripts añadidos para ser ejecutados de esta manera se están ejecutando de forma asíncrona. Si es así, puede suceder que work.js se ejecute incluso antes de jQuery (u otras bibliotecas que pueda agregar en el futuro).

Y también me gustaría saber cuál es la mejor y la mejor forma de usar bibliotecas de terceros en mi extensión de Chrome.

Answer 1

Y funciona bien, pero me preocupa si los scripts añadidos para ser ejecutados de esta manera se están ejecutando de forma asíncrona. Si es así, puede suceder que work.js se ejecute incluso antes de jQuery (u otras bibliotecas que pueda agregar en el futuro).

Eso realmente no debería ser una preocupación: usted pone en cola los scripts para ser ejecutados en un cierto contexto JS, y ese contexto no puede tener una condición de carrera ya que es de un solo hilo.

Sin embargo, la forma correcta de eliminar esta preocupación es encadenar las llamadas:

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''
});
});
});

O, generalizado:

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);

O, promisió (y trajo más en línea con la firma adecuada):

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)
);

O, ¿por qué diablos no, async / await -ed para una sintaxis aún más clara:

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);
}

Tenga en cuenta que en Firefox puede usar browser.tabs.executeScript ya que devolverá una Promesa.

Answer 2

Además de las soluciones ya mencionadas, también puede descargar jquery.min.js localmente y luego usarlo -

Para descargar -

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

manifest.json -

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

en html -

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

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

Answer 3

Debe agregar su script jquery a su proyecto chrome-extension y a la sección de background de su manifest.json de la siguiente manera:

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

Si necesita jquery en content_scripts, también debe agregarlo en el manifiesto:

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

Esto es lo que hice.

Además, si recuerdo correctamente, las secuencias de comandos de fondo se ejecutan en una ventana de fondo que puede abrir a través de chrome://extensions .

Answer 4

Es muy fácil solo hacer lo siguiente:

agregue la siguiente línea en su mainfest.json

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

ahora puede cargar jquery directamente desde url

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

Fuente: google doc