Mellowtel Meucci Module Setup voor Browser Plugins Gids

Deze functie vereist Mellowtel versie 1.6.2 of hoger. Dit is een breaking change vergeleken met eerdere versies.

Mellowtel biedt een optionele functie waarmee je meer verzoeken kunt verwerken en daardoor meer kunt verdienen. Deze functie heet “Meucci”.

Installatie

Installeer eerst het vereiste npm-pakket met je favoriete pakketbeheerder:

Met npm

npm install @mellowtel/module-meucci

Met yarn

yarn add @mellowtel/module-meucci

Met pnpm

pnpm add @mellowtel/module-meucci

Hieronder vind je instructies voor het inschakelen van de Meucci-functie in je browserplugin, met opties voor zowel standaard- als Plasmo-frameworkimplementaties.

Standaard Implementatie

1. Maak een JavaScript-bestand genaamd `meucci.js`

Maak in de src-map, of waar je js-bestanden hebt, een bestand genaamd meucci.js en voeg de volgende code toe. Zorg ervoor dat dit bestand wordt opgenomen in je uiteindelijke build (/dist) map. Als je de initiële webpack config setup hebt gevolgd, kun je dit bestand eenvoudig toevoegen aan het entry object in je webpack-configuratie.

import ModuleMeucci from "@mellowtel/module-meucci";

let moduleMeucci;

(async () => {
    moduleMeucci = new ModuleMeucci();
    await moduleMeucci.init();
})();

2. Werk je webpack-configuratie bij

Zorg ervoor dat je uiteindelijke build-map het meucci.js bestand bevat. Als je de initiële webpack config setup hebt gevolgd, kun je dit bestand eenvoudig toevoegen aan het entry object in je webpack-configuratie.

module.exports = {
    // ...
    entry: {
        // background: path.join(__dirname, 'src', 'background.js'),
        // popup: path.join(__dirname, 'src', 'popup.js'),
        // content_script: path.join(__dirname, 'src', 'content_script.js'), ...
        // pascoli: path.join(__dirname, 'src', 'pascoli.js'),
        meucci: path.join(__dirname, 'src', 'meucci.js'),
        // ...
    },
    // ...
}

3. Werk manifest.json bij

Voeg het meucci.js bestand toe aan je manifest.json als web_accessible_resources:

{
  "web_accessible_resources": [
    {
      "resources": [
        "meucci.js"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

Plasmo Framework Implementatie

Als je het Plasmo-framework gebruikt, volg dan deze alternatieve stappen:

1. Maak een TypeScript-bestand genaamd `meucci.ts`

Maak in de src-map, of waar je ts-bestanden hebt, een bestand genaamd meucci.ts en voeg de volgende code toe:

import ModuleMeucci from "@mellowtel/module-meucci";

let moduleMeucci;

(async () => {
    moduleMeucci = new ModuleMeucci();
    await moduleMeucci.init();
})();

2. Maak Build Script

Maak een build-meucci.js bestand in je projectroot met de volgende inhoud:

const esbuild = require('esbuild')
const fs = require('fs')
const path = require('path')

// Functie om te wachten tot een map bestaat
const waitForDirectory = async (dir, timeout = 10000) => {
  const start = Date.now()
  while (!fs.existsSync(dir)) {
    if (Date.now() - start > timeout) {
      throw new Error(`Timeout bij wachten op map: ${dir}`)
    }
    await new Promise(resolve => setTimeout(resolve, 100))
  }
}

// Maak de build functie
async function buildMeucci() {
  // Bouw de bundel
  await esbuild.build({
    entryPoints: ['src/meucci.ts'], // TODO: VERVANG met het pad naar je meucci.ts bestand
    bundle: true,
    outfile: 'meucci.bundled.js',
    platform: 'browser',
    format: 'iife',
    minify: true,
    target: ['es2020'],
    define: {
      'process.env.NODE_ENV': '"production"'
    }
  })

  // Lees het gebundelde bestand
  const bundledContent = fs.readFileSync('meucci.bundled.js', 'utf8')

  // Kopieer naar dev en prod mappen
  const directories = [ 
    'build/chrome-mv3-dev',
    'build/chrome-mv3-prod',
    'build/firefox-mv2-dev',
    'build/firefox-mv2-prod',
    'build/safari-mv2-dev',
    'build/safari-mv2-prod',
    'build/opera-mv3-dev',
    'build/opera-mv3-prod'
  ] // TODO: VERVANG met de paden naar je dev en prod mappen

  // Verwerk alle mappen gelijktijdig
  await Promise.all(directories.map(async (dir) => {
    try {
      console.log(`Wachten op map: ${dir}`)
      await waitForDirectory(dir)
      // Schrijf het gebundelde bestand
      fs.writeFileSync(path.join(dir, 'meucci.js'), bundledContent)
      console.log(`Toegevoegd meucci.js aan ${dir}`)
    } catch (err) {
      console.log(`Overslaan ${dir} - ${err.message}`)
    }
  }))

  // Verwijder het tijdelijke bestand
  fs.unlinkSync('meucci.bundled.js')
}

buildMeucci().catch(err => {
  console.error(err)
  process.exit(1)
})

3. Werk package.json bij

Voeg het volgende toe aan je package.json bestand:

{
  "scripts": {
    "build:meucci": "node build-meucci.js"
  },
  "web_accessible_resources": [
    {
      "resources": [
        "meucci.js"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

Je kunt:

Het build script handmatig uitvoeren na je hoofd build: npm run build:meucci
Of het toevoegen aan je bestaande build script met &: "build": "your-existing-build-command & npm run build:meucci"

Dit zorgt ervoor dat het Meucci-bestand correct wordt gebundeld en gekopieerd naar alle build-mappen in de juiste Plasmo-structuur.

Werk initContentScript bij

Voor beide implementaties, wijzig je initContentScript methode in het content script om het juiste pad naar het Meucci-bestand op te nemen:

// Voor standaard implementatie
await initContentScript({
    meucciFilePath: "meucci.js"
});

Voor Plasmo framework, kun je het volgende gebruiken:

// Voor Plasmo framework
await initContentScript({
    meucciFilePath: "meucci.js"
});

Als je ook Pascoli hebt ingeschakeld, kun je het volgende gebruiken:

await initContentScript({
    pascoliFilePath: "pascoli.html", // of "tabs/pascoli.html" als je het Plasmo framework gebruikt
    meucciFilePath: "meucci.js"
});

Aan de slag

Concepten

Bureaublad-apps

Browserplug-ins

Website

Mellowtel-elementen

Mobiele app

Verdien meer door een extra functie in te schakelen: Meucci

Installatie

Met npm

Met yarn

Met pnpm

Standaard Implementatie

1. Maak een JavaScript-bestand genaamd `meucci.js`

2. Werk je webpack-configuratie bij

3. Werk manifest.json bij

Plasmo Framework Implementatie

1. Maak een TypeScript-bestand genaamd `meucci.ts`

2. Maak Build Script

3. Werk package.json bij

Werk initContentScript bij

​Installatie

​Met npm

​Met yarn

​Met pnpm

​Standaard Implementatie

​1. Maak een JavaScript-bestand genaamd meucci.js

​2. Werk je webpack-configuratie bij

​3. Werk manifest.json bij

​Plasmo Framework Implementatie

​1. Maak een TypeScript-bestand genaamd meucci.ts

​2. Maak Build Script

​3. Werk package.json bij

​Werk initContentScript bij

Installatie

Met npm

Met yarn

Met pnpm

Standaard Implementatie

1. Maak een JavaScript-bestand genaamd `meucci.js`

2. Werk je webpack-configuratie bij

3. Werk manifest.json bij

Plasmo Framework Implementatie

1. Maak een TypeScript-bestand genaamd `meucci.ts`

2. Maak Build Script

3. Werk package.json bij

Werk initContentScript bij