Maison > Questions et réponses > le corps du texte
J'écris une extension Chrome et j'essaie de superposer Lorsque j'accède à la méthode Dois-je utiliser la messagerie entre background.html et popup.html pour accéder au DOM de la page web ? J'aimerais tout faire dans popup.html et également utiliser jQuery si possible. P粉2960800762023-10-19 08:17:05 Quelques exemples d'utilisation de l'injection programmatique pour ajouter un script contextuel extensible à ce div. N'oubliez pas d'ajouter des autorisations dans manifest.json, voir les autres réponses pour plus d'informations. Appel simple : Remarque : Dans Chrome 91 ou version antérieure, Appelez avec paramètres et recevez les résultats Nécessite Chrome 92 lors de sa mise en œuvre Exemple 1 : Exemple 2 : Appel simple : Appelez avec paramètres et recevez le résultat : Cet exemple utilise la fonction P粉6004020852023-10-19 00:39:30 Problème : Les pages d'extension (popups, options, pages de fond dans MV2, etc.) sont séparées de la page web, elles ont leur propre DOM, Solution : utilisez Content Scripts pour accéder aux pages Web ou interagir avec leur contenu. manifest.json : Il s'exécutera une fois lors du chargement de la page. Après cela, utilisez Messaging. Attention ! Il ne peut pas envoyer d'éléments DOM, Maps, Sets, ArrayBuffers, classes, fonctions, etc. Il ne peut envoyer que des objets et des types simples compatibles JSON, vous devez donc extraire manuellement les données requises et les transmettre sous forme de simple tableau ou objet. ManifestV3 : Dans les scripts d'extension (tels que les fenêtres contextuelles), des scripts/fonctions de contenu peuvent être injectés dans les onglets selon les besoins. Le résultat de cette méthode est la dernière expression du script de contenu et peut donc être utilisé pour extraire des données. Les données doivent être compatibles JSON, voir l'avertissement ci-dessus. dans Si l'idéal n'est pas possible, ajoutez les sites autorisés à Différences entre ManifestV2 et ce qui précède : document.body.insertBefore
à partir de popup.html, elle écrase le document.body.insertBefore
方法时,它会覆盖弹出窗口上的 répondre à tous(2)je répondrai
Manifeste V3
(async () => {
const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
await chrome.scripting.executeScript({
target: {tabId: tab.id},
func: inContent1,
});
})();
// executeScript runs this code inside the tab
function inContent1() {
const el = document.createElement('div');
el.style.cssText = 'position:fixed; top:0; left:0; right:0; background:red';
el.textContent = 'DIV';
document.body.appendChild(el);
}
func:
应为 function:
. args
. res = await chrome.scripting.executeScript({
target: {tabId: tab.id},
func: (a, b) => { return [window[a], window[b]]; },
args: ['foo', 'bar'],
});
(async () => {
const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
let res;
try {
res = await chrome.scripting.executeScript({
target: {tabId: tab.id},
func: inContent2,
args: [{ foo: 'bar' }], // arguments must be JSON-serializable
});
} catch (e) {
console.warn(e.message || e);
return;
}
// res[0] contains results for the main page of the tab
document.body.textContent = JSON.stringify(res[0].result);
})();
// executeScript runs this code inside the tab
function inContent2(params) {
const el = document.createElement('div');
el.style.cssText = 'position:fixed; top:0; left:0; right:0; background:red';
el.textContent = params.foo;
document.body.appendChild(el);
return {
success: true,
html: document.body.innerHTML,
};
}
Liste V2
// uses inContent1 from ManifestV3 example above
chrome.tabs.executeScript({ code: `(${ inContent1 })()` });
// uses inContent2 from ManifestV3 example above
chrome.tabs.executeScript({
code: `(${ inContent2 })(${ JSON.stringify({ foo: 'bar' }) })`
}, ([result] = []) => {
if (!chrome.runtime.lastError) {
console.log(result); // shown in devtools of the popup window
}
});
inContent
pour convertir automatiquement le code en chaîne. L'avantage est que l'EDI peut appliquer la coloration syntaxique et le peluchage. L'inconvénient évident est que le navigateur perd du temps à analyser le code, mais cela prend généralement moins d'une milliseconde, donc c'est négligeable. document
、< code>window 和 chrome-extension://
URL.
Méthode 1. Déclarative
"content_scripts": [{
"matches": ["*://*.example.com/*"],
"js": ["contentScript.js"]
}],
Méthode 2. Programmation
权限
manifest.json :
“脚本”
- obligatoire ; "activeTab"
- Scénario idéal, adapté pour répondre aux actions des utilisateurs (généralement en cliquant sur une icône d'extension dans la barre d'outils). N'affichez aucun avertissement d'autorisation lors de l'installation d'extensions. host_permissions
dans manifest.json :
“*://*.example.com/”
et tout autre site internet de votre choix. "
或 "*://*/"
Ceux-ci placeront votre extension dans une file d'attente de révision très lente dans le Chrome Web Store en raison des autorisations étendues de l'hôte.
权限
.