web-dev-qa-db-fra.com

Puis-je utiliser la marionnettiste à l'intérieur chrome extension

Je veux construire un chrome Extension pour un usage personnel. L'extension fera gratter des pages Web et cela rendra des informations. Donc, je pense que la marionnettiste peut m'aider avec ça. Je comprends que j'ai besoin de courir Nœud à l'intérieur d'un chrome extension. Est-ce possible? J'ai trouvé des réponses mais elles sont vieilles.

google-chrome-extensionpuppeteer
9
Petran

En fait, c'est possible mais avec quelques limitations. Marionnettiste usage devtools-protocole ( https://chromeevtools.github.io/devtools-protocol/ ) qui est disponible à l'intérieur chrome Extension lorsque vous activez Deubgger dans votre manifeste d'extension https://developer.chrome.com/extensions/debugger . Mais l'extension intérieure est disponible uniquement la dernière version stable et stable de protocole (pour l'instant est de 1,3 https://chromedevtools.github.io/devtools-protocol/1- ).

Mais à mon avis, vous n'avez pas besoin devtools-protocole pour gérer votre problème. Il suffit d'utiliser une API d'extension standard https://developer.chrome.com/extensions/api_index Pour ouvrir n'importe quelle URL dont vous avez besoin ( chrome.tab.update ), Paysez la page à l'intérieur du contenu.js et faites avec ces données ce que vous voulez.

3
pako

Je sais que cela est de 9 mois de retard mais j'ai eu le même cas d'utilisation au travail sur des machines à fenêtre, mais vous pouvez le faire fonctionner avec Mac.

L'astuce consiste à utiliser marionteeer-web https://github.com/puppeeer/puppeer/tree/master/utils/browser#bungling-for-web-browsers

Regrouper le référentiel et placez-le dans votre chrome dossier d'extension puis référence dans votre popup.html Avec quelque chose comme

<script src="./puppeteer/utils/browser/puppeteer-web.js"></script>

Vous aurez ensuite besoin de tirer parti de la fonctionnalité de débogage à distance de Chrome en tant que pupeteer-Web ne peut pas démarrer sa propre instance via puppeteer.launch() et ne peut utiliser que puppeteer.connect() pour se connecter à un fichier déjà existant = chrome instance.

Sur Windows ajoutez --remote-debugging-port=9222 À la fin du champ cible du chrome Coupe courte selon comment faire Chrome toujours Lancement avec drapeau du port de débogage distant

Ou sur Mac /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=$(mktemp -d -t 'chrome-remote_data_dir')

Une fois que le débogage à distance est activé, vous pourrez voir la propriété webSocketDebuggerUrl en visitant http://127.0.0.1:9222/json/version Sur votre navigateur. C'est la méthode de connexion browserWSEndpoint la méthode de connexion sera invoquée.

Vous devrez également ajouter l'adresse de port au tableau permissions dans le fichier manifest.json Sinon ajax demande ne fonctionnera pas dans chrome Extension.

Par exemple:

"permissions": [ "tabs" , "identity", "http://127.0.0.1:9222/*"],

Exemple popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Example popup</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div>
      <button id='puppeteer-button'>Do Puppeteer Things</button>
      <script src="./puppeteer/utils/browser/puppeteer-web.js"></script>
      <script type="module" src="popup.js"></script>
    </div>
  </body>
</html>

Exemple popup.js

let browserWSEndpoint = '';
const puppeteer = require("puppeteer");

async function initiatePuppeteer() {
  await fetch("http://127.0.0.1:9222/json/version")
    .then(response => response.json())
    .then(function(data) {
        browserWSEndpoint = data.webSocketDebuggerUrl;
      })
    .catch(error => console.log(error));
}

initiatePuppeteer();

// Assign button to puppeteer function

document
  .getElementById("puppeteer-button")
  .addEventListener("click", doPuppeteerThings);

async function doPuppeteerThings() {
  const browser = await puppeteer.connect({
    browserWSEndpoint: browserWSEndpoint
  });
  const page = await browser.newPage();

  // Your puppeteer code goes here

}

J'espère que cela aide, je n'ai eu aucune question en ajoutant des débogements à distance à mon domaine cible sur les machines de ma fenêtre de travail, malgré le sentiment un peu hacky. J'ai écrit un courtier de blog dessus avec une meilleure mise en évidence de la syntaxe ici.

2
tchan