Extension navigateur

Project Documentation "Cultural Cocktail Extension"

Introduction

Project Name: Cultural Cocktail Extension
Description: This browser extension allows managing and displaying cultural content from various sources. It adds interactive features directly to web pages to enrich the user experience with relevant cultural information.

Installation

Prerequisites:

Node.js 14+
npm

Instructions:

Clone the repository

git clone https://your-repository-url.git cd Cocktail_Culturel_Extension-main

Install dependencies
```
npm install 
```
Build the project
```
npm run build 
```
Load the extension in the browser
- Open Chrome and go to chrome://extensions/.
- Enable Developer Mode.
- Click on Load unpacked and select the dist folder generated after the build.

Project Structure

Cocktail_Culturel_Extension-main/ │ ├── .github/ │ └── workflows/ │ └── build.yml ├── public/ │ └── icons/ │ ├── 16.png │ ├── 19.png │ ├── 32.png │ ├── 38.png │ ├── 48.png │ ├── 64.png │ ├── 96.png │ ├── 128.png │ ├── 256.png │ ├── 512.png ├── src/ │ ├── assets/ │ │ └── logo.svg │ ├── entries/ │ │ ├── background/ │ │ │ ├── main.js │ │ │ ├── script.js │ │ │ └── serviceWorker.js │ │ ├── contentScript/ │ │ │ └── renderContent.js │ │ └── popup/ │ │ ├── index.html │ │ ├── main.js │ │ └── style.css │ ├── helpers/ │ │ ├── createTabs.js │ │ ├── geoloc.js │ │ ├── getWebPageInformation.js │ │ ├── insertHTML.js │ │ ├── removeElement.js │ │ └── waitForElement.js │ ├── manipulations/ │ │ ├── homePage.js │ │ └── videoPage.js │ ├── config.json │ ├── main.css │ ├── main.js │ └── manifest.js ├── .env ├── .gitignore ├── README.md ├── iconify.js ├── jsconfig.json ├── package-lock.json ├── package.json ├── pnpm-lock.yaml └── vite.config.js

Code Details

manifest.js

export default { manifest_version: 2, name: "Cultural Cocktail Extension", version: "1.0.0", description: "Adds cultural content to your browsing experience.", icons: { "16": "icons/16.png", "48": "icons/48.png", "128": "icons/128.png" }, background: { scripts: ["entries/background/main.js"], persistent: false }, permissions: ["activeTab", "geolocation"], browser_action: { default_popup: "entries/popup/index.html", default_icon: { "16": "icons/16.png", "48": "icons/48.png", "128": "icons/128.png" } }, content_scripts: [ { matches: [""], js: ["entries/contentScript/renderContent.js"] } ], web_accessible_resources: ["icons/*.png"] };

background/main.js

chrome.runtime.onInstalled.addListener(() => { console.log("Cultural Cocktail Extension Installed"); });

contentScript/renderContent.js

console.log("Content Script Loaded"); document.body.style.border = "5px solid red";

Main Features

Add Cultural Content: The extension adds relevant cultural information directly to the web pages visited by the user.
Interactive Popup: A popup provides access to additional features and cultural information.
Geolocation: Uses geolocation to provide local cultural content.

Configuration

Configuration File: .env

Important Environment Variables:

API_KEY: API key to access cultural content services.
DEBUG: Enable or disable debug mode (true/false).

Scripts

createTabs.js

export function createTab(url) { chrome.tabs.create({ url }); }

geoloc.js

export function getCurrentPosition() { return new Promise((resolve, reject) => { navigator.geolocation.getCurrentPosition(resolve, reject); }); }

Tests

Run tests:

npm run test

Deployment

Deployment Instructions:

Generate the build
```
npm run build 
```
Load the extension in the browser
- Open Chrome and go to chrome://extensions/.
- Enable Developer Mode.
- Click on Load unpacked and select the dist folder.

Contribution

How to contribute:

Fork the repository.
Create a branch for your feature (git checkout -b feature/my-feature).
Commit your changes (git commit -m 'Add my feature').
Push the branch (git push origin feature/my-feature).
Open a pull request.

Notes

This documentation was generated by ChatGPT; there might be some inaccuracies. If that's the case, please let me know for correction.

Gitlab

https://gitlab.com/cocktail-culturel/cocktail_culturel_extension-main

Documentation du Projet "Cocktail Culturel Extension"

Introduction

Nom du Projet : Cocktail Culturel Extension
Description : Cette extension de navigateur permet de gérer et d'afficher des contenus culturels provenant de diverses sources. Elle ajoute des fonctionnalités interactives directement sur les pages web pour enrichir l'expérience utilisateur avec des informations culturelles pertinentes.

Installation

Prérequis :

Node.js 14+
npm

Instructions :

Cloner le dépôt

git clone https://votre-url-de-depot.git
cd Cocktail_Culturel_Extension-main

Installer les dépendances
```
npm install
```
Construire le projet
```
npm run build
```
Charger l'extension dans le navigateur
- Ouvrez Chrome et allez à chrome://extensions/.
- Activez le Mode développeur.
- Cliquez sur Charger l’extension non empaquetée et sélectionnez le dossier dist généré après la construction.

Structure du Projet

Cocktail_Culturel_Extension-main/
│
├── .github/
│   └── workflows/
│       └── build.yml
├── public/
│   └── icons/
│       ├── 16.png
│       ├── 19.png
│       ├── 32.png
│       ├── 38.png
│       ├── 48.png
│       ├── 64.png
│       ├── 96.png
│       ├── 128.png
│       ├── 256.png
│       ├── 512.png
├── src/
│   ├── assets/
│   │   └── logo.svg
│   ├── entries/
│   │   ├── background/
│   │   │   ├── main.js
│   │   │   ├── script.js
│   │   │   └── serviceWorker.js
│   │   ├── contentScript/
│   │   │   └── renderContent.js
│   │   └── popup/
│   │       ├── index.html
│   │       ├── main.js
│   │       └── style.css
│   ├── helpers/
│   │   ├── createTabs.js
│   │   ├── geoloc.js
│   │   ├── getWebPageInformation.js
│   │   ├── insertHTML.js
│   │   ├── removeElement.js
│   │   └── waitForElement.js
│   ├── manipulations/
│   │   ├── homePage.js
│   │   └── videoPage.js
│   ├── config.json
│   ├── main.css
│   ├── main.js
│   └── manifest.js
├── .env
├── .gitignore
├── README.md
├── iconify.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
└── vite.config.js

Détails du Code

manifest.js

export default {
  manifest_version: 2,
  name: "Cocktail Culturel Extension",
  version: "1.0.0",
  description: "Ajoute des contenus culturels à votre expérience de navigation.",
  icons: {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  background: {
    scripts: ["entries/background/main.js"],
    persistent: false
  },
  permissions: ["activeTab", "geolocation"],
  browser_action: {
    default_popup: "entries/popup/index.html",
    default_icon: {
      "16": "icons/16.png",
      "48": "icons/48.png",
      "128": "icons/128.png"
    }
  },
  content_scripts: [
    {
      matches: ["<all_urls>"],
      js: ["entries/contentScript/renderContent.js"]
    }
  ],
  web_accessible_resources: ["icons/*.png"]
};

background/main.js

chrome.runtime.onInstalled.addListener(() => {
  console.log("Cocktail Culturel Extension Installed");
});

contentScript/renderContent.js

console.log("Content Script Loaded");
document.body.style.border = "5px solid red";

Fonctionnalités Principales

Ajout de Contenus Culturels : L'extension ajoute des informations culturelles pertinentes directement sur les pages web visitées par l'utilisateur.
Popup Interactif : Un popup permet d'accéder à des fonctionnalités supplémentaires et à des informations culturelles.
Géolocalisation : Utilise la géolocalisation pour fournir des contenus culturels locaux.

Configuration

Fichier de configuration : .env

Variables d'environnement importantes :

API_KEY : Clé d'API pour accéder aux services de contenu culturel.
DEBUG : Activer ou désactiver le mode débogage (true/false).

Scripts

createTabs.js

export function createTab(url) {
  chrome.tabs.create({ url });
}

geoloc.js

export function getCurrentPosition() {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(resolve, reject);
  });
}

Tests

Exécuter les tests :

npm run test

Déploiement

Instructions de déploiement :

Générer le build
```
npm run build
```
Charger l'extension dans le navigateur
- Ouvrez Chrome et allez à chrome://extensions/.
- Activez le Mode développeur.
- Cliquez sur Charger l’extension non empaquetée et sélectionnez le dossier dist.

Contribution

Comment contribuer :

Forker le dépôt.
Créer une branche pour votre fonctionnalité (git checkout -b feature/ma-feature).
Commiter vos changements (git commit -m 'Ajout de ma feature').
Pousser la branche (git push origin feature/ma-feature).
Ouvrir une pull request.

Précisions

Cette documentation a été générée par ChatGPT, il se peut qu'il y ait quelques imprécisions, si c'est le cas merci de me le signaler pour correction.

Gitlab

https://gitlab.com/cocktail-culturel/cocktail_culturel_extension-main

Extension navigateur - code

Project Documentation "Cultural Cocktail Extension"

Introduction

Installation

Project Structure

Code Details

Main Features

Configuration

Scripts

Tests

Deployment

Contribution

Notes

Gitlab

Documentation du Projet "Cocktail Culturel Extension"

Introduction

Installation

Structure du Projet

Détails du Code

Fonctionnalités Principales

Configuration

Scripts

Tests

Déploiement

Contribution

Précisions

Gitlab