Accéder à la « fenêtre »/DOM/HTML d'une page Web à partir d'une extension

Question

J'écris une extension Chrome et j'essaie de superposer la page Web actuelle dès que l'on clique sur un bouton dans un fichier popup.html. Lorsque j'accède à la méthode document.body.insertBefore à partir de popup.html, elle écrase la fenêtre contextuelle, pas la page Web actuelle. Dois-je utiliser la messagerie entre background.html et popup.html pour accéder au DOM de la page Web ? Je veux tout faire dans popup.html et aussi utiliser j si possible

P粉296080076 · Answer

Quelques exemples d'utilisation de l'injection programmatique pour ajouter un script contextuel extensible à ce div.

Manifeste V3

N'oubliez pas d'ajouter des autorisations dans manifest.json, voir les autres réponses pour plus d'informations.

Appel simple :

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

Remarque : Dans Chrome 91 ou version antérieure, func: 应为 function:.

Appelez avec paramètres et recevez les résultats

Nécessite Chrome 92 lors de sa mise en œuvre args.

Exemple 1 :

res = await chrome.scripting.executeScript({
  target: {tabId: tab.id},
  func: (a, b) => { return [window[a], window[b]]; },
  args: ['foo', 'bar'],
});

Exemple 2 :

(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

Appel simple :

// uses inContent1 from ManifestV3 example above
chrome.tabs.executeScript({ code: `(${ inContent1 })()` });

Appelez avec paramètres et recevez le résultat :
```
// 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
  }
});
```
Cet exemple utilise la fonction 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.

P粉600402085 · Answer

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, document、window 和 chrome-extension://URL.

Veuillez noter que Service Worker n'a aucun DOM/document/fenêtre.
Pour inspecter chaque contexte d'une extension utilisez ses propres outils de développement .

Solution : utilisez Content Scripts pour accéder aux pages Web ou interagir avec leur contenu.

Les scripts de contenu sont exécutés dans la page Web, pas dans l'extension.
Les scripts de contenu sont isolés par défaut, voir Comment exécuter du code dans le contexte de la page (également connu sous le nom de monde principal).
Ne chargez pas de scripts de contenu dans les pages d'extension.

Méthode 1. Déclarative

manifest.json :

"content_scripts": [{
  "matches": ["*://*.example.com/*"],
  "js": ["contentScript.js"]
}],

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.

Méthode 2. Programmation

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.
Obligatoire
dans 权限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.
Si l'idéal n'est pas possible, ajoutez les sites autorisés à 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.
Différences entre ManifestV2 et ce qui précède :
- Utilisez chrome.tabs.executeScript.
- Spécifiez le site Web en 权限.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Manifeste V3

Liste V2

Méthode 1. Déclarative

Méthode 2. Programmation