Préparation au développement de l'extension tagdown

Benbinbin 2021-10-13 17:27:19
pr paration au veloppement extension


Petite connaissance,Grand défi!Cet article participe“Les programmeurs ont besoin de peu de connaissances”Activités créatives.


TagDown Est un plugin de gestion de signets open source, Vous pouvez utiliser l'extensionParcourirNouveauModifierSignets,Il soutient également de différentes manièresExporterSignets.

.En plus des fonctions courantes de gestion des signets,Il présente également les caractéristiques suivantes::

  • Soutien NouveauSignets,Avec des informations supplémentaires,Par exemple tagsgroups Attendez.
  • Soutien Exporter N'importe quel signet est json Documentation
  • Par Arbre .Parcourir les données des signets de la hiérarchie sous la forme de
  • Ouvrir plusieurs signets en un seul clic,Soutien dans Groupes d'étiquettes Signet ouvert à l'intérieur

Compétences préparatoires

Utilisation de ce projet Vue(Vue 3.0 Version)Et Chrome Offre API Développement(Bien sûr, trois compétences de base essentielles sont également utilisées HTML、CSS、JavaScript),En outre CSS Utilisation principale Tailwindcss Cadre.

Créer un environnement de développement

Construire une utilisation Vue+Vite+Tailwindcss Environnement de développement pour,Les programmes d'extension qui y sont développés appartiennent à Manifest V3 Version.

Le système est déjà installé node Environnement

Si elle est utilisée dans le développement VS Code Éditeur de texte,Installation recommandée Vue3 Soutien au développement Volar Plug - in.

Saisissez la commande suivante au terminalCréer un Vue3+Vite Modèle de projet pour

npm init vite@latest
Copier le Code

Puis installez les paquets de dépendance comme demandé

# Basculer le chemin du terminal dans le dossier du projet
cd project-folder
# Installer des paquets dépendants
npm install
Copier le Code

Pour une utilisation dans un projet ESLint Gestion des spécifications de code,Installation requise eslint-plugin-vue Module

npm install --save-dev eslint eslint-plugin-vue
Copier le Code

Puis entrez dans le terminal eslint --init Commande pour initialiser la configuration,En fonction de vos habitudes de programmation et des exigences de votre équipe,Suivez les instructions pour définir les spécifications de style de code:

  • To check syntax, find problems, and enforece code style
  • JavaScript modules (import/export)
  • Vue.js
  • Browser & Node
  • Use a popular style guide -> Airbnb
  • JavaScript

Ensuite, le système installe les paquets dépendants et génère ESLint Profil .eslintrc.js

Parce que ce qui est utilisé dans le projet est Vue3 Version,Il faut donc ouvrir le profil .eslintrc.js Modifier en conséquence

module.exports = {
  // ...
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
  ],
  // ...
}
Copier le Code

Si vous utilisez VS Code Codage ,Besoin de Dossiers .vscode Créer un fichier dans settings.json De l'éditeur eslint Configuration

{
   "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
  },
   "eslint.validate": [
       "javascript",
       "vue"
  ],
}
Copier le Code

En savoir plus sur l'utilisation de ESLint Pour plus de détails sur la gestion des spécifications de code, veuillez consulter ce Le film

En raison du développement Chrome Les plug - ins nécessitent une structure de projet spéciale,Par exemple, le Répertoire racine doit avoir un manifest.json Documentation décrivant les informations et les permissions relatives à l'extenseur,Il est également nécessaire d'installer un plug - in spécial sur le terminal en entrant la commande suivante vite-plugin-vue-crx3

npm i -D vite-plugin-vue-crx3
Copier le Code

Selon le plug - in Documentation descriptive,Modifier la structure du Répertoire du projet,Pour répondre aux exigences de développement du programme étendu.

Le cœur de ce plugin est:C'est ça. manifest.json En tant que fichier d'entrée,Analyse automatique manifest Configuration du développement dans,Accès vue Fichiers d'entrée individuels appliqués, Automatiquement lors de l'emballage manifest.json Mise à jour du chemin de développement vers le chemin de production.

Structure originale du Répertoire du projet

│ .eslintrc.js
│ .gitignore
│ index.html
│ package-lock.json      
│ package.json
│ README.md
│ vite.config.js
│
├─.vscode
│     extensions.json
│     settings.json
│
├─public
│     favicon.ico
│
└─src
  │ App.vue
  │ main.js
  │
  ├─assets
  │     logo.png
  │
  └─components
          HelloWorld.vue
Copier le Code

Parce que le fichier d'entrée pour l'emballage du projet est manifest.json,Supprimer le fichier d'entrée original src/main.js Et les documents correspondants index.html. Puis ajouter src/manifest.json Documents et autres documents.Structure du Répertoire modifiée

RÉFÉRENCES crx3-dev-template Modèle

│ .eslintrc.js      
│ .gitignore
│ package-lock.json  
│ package.json      
│ postcss.config.js  
│ README.md
│ tailwind.config.js
│ vite.config.js    
│  
├─.vscode
│     extensions.json
│     settings.json  
│      
├─public
│ │ favicon.ico    
│ │  
│ └─_locales
│     └─en
└─src
  │ manifest.json  
  │ options.html  
  │ popup.html    
  │  
  ├─assets
  │ │ logo.png    
  │ │  
  │ └─images      
  │         icon128.png
  │         icon16.png
  │         icon24.png
  │         icon32.png
  │         icon48.png
  │         icon64.png
  │         icon72.png
  │         logo.png  
  │
  ├─background
  │     main.js        
  │      
  ├─options
  │     App.vue        
  │     main.js        
  │      
  └─popup
          App.vue      
          main.js  
Copier le Code

Fonction principale du fichier et du dossier:

  • src/manifest.json Liste de configuration de l'extenseur
  • background Background with extender service worker Codes associés,In manifest V3 Dans la version extender,Il n'y a pas de page frontale visible en arrière - plan,Donc ça ne devrait pas être inutile Vue
  • src/popup.html Fichier d'entrée pour la fenêtre contextuelle, Dossiers popup Placer le document de code associé à la page contextuelle,C'est un Vue Application à une seule page
  • src/options.html Définir le fichier d'entrée de la page, Dossiers options Placer le document de code associé à la page de configuration,C'est un Vue Application à une seule page
  • Dossiers public/_locales Placement et internationalisation (Traduction)Documents connexes

Dont: Dossiers src Dans manifest.json Le document est la liste de configuration de l'extenseur

{
"name": "TagDown",
"manifest_version": 3,
"version": "1.0.0",
"description": "TagDown is a bookmark manager.",
"background": {
"service_worker": "./background/main.js",
"type": "module"
},
"action": {
"default_title": "TagDown",
"default_popup": "./popup.html",
"default_icon": {
"16": "./assets/images/icon16.png",
"32": "./assets/images/icon32.png",
"48": "./assets/images/icon48.png",
"64": "./assets/images/icon64.png",
"128": "./assets/images/icon128.png"
}
},
"options_page": "./options.html",
"icons": {
"16": "./assets/images/icon16.png",
"32": "./assets/images/icon32.png",
"48": "./assets/images/icon48.png",
"64": "./assets/images/icon64.png",
"128": "./assets/images/icon128.png"
},
"default_locale": "en"
}
Copier le Code

:bulb: Parce qu'il a été placé Dossiers src En bas manifest.json Servir uniquement l'environnement de développement,C'est pour ça qu'on met en place les ressources(Fichiers d'entrée individuels) Sur le chemin de ,Utilisez le chemin relatif pour,Les chemins sont automatiquement analysés et mis à jour lorsque le plug - in est emballé.

Et aussi dans vite Profil vite.config.js Plug - in de référence,Et définir le fichier d'entrée

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vue from '@vitejs/plugin-vue';
import { crx3 } from 'vite-plugin-vue-crx3';
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
},
},
plugins: [vue(), crx3()], // crx3C'est la fonction d'entrée du plug - in
build: {
target: 'es2015',
rollupOptions: {
input: resolve(__dirname, 'src/manifest.json'), // Oui. src Dans manifest.json En tant que fichier d'entrée
},
},
})
Copier le Code

Ce plugin prend en chargeSurcharge thermiqueFacile à développer et à déboguer,Besoin de package.json Ajouter la directive correspondante au document

{
// ...
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"watch": "vite build --watch"
},
// ...
}
Copier le Code

Ensuite, utilisez npm run watch La commande active la fonction de surcharge thermique,Lorsque les modifications du Code sont enregistrées,Le navigateur met automatiquement à jour les plug - ins actuellement développés,La page Web appelée se rafraîchit automatiquement.

Enfin, pour faciliter le style de la page,Utiliser Tailwindcss Cadre,Suivez les étapes ci - dessous pour les documents officiels:

  • Utilisez la commande suivante sur le terminal pour installer Tailwind CSS Modules et paquets de dépendances correspondants

    npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
    Copier le Code
  • Initialiser au terminal en utilisant la commande suivante Tailwind CSS Générer un profil tailwind.config.js

    npx tailwindcss init -p
    Copier le Code

    Pour optimiser le projetDéveloppementEtEmballez Taille du fichier à ,Requis dans le profil tailwind.config.js Configuration en cours,Pour supprimer les codes de style inutilisés

    module.exports = {
    // ...
    mode: 'jit',
    purge: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
    // ...
    };
    Copier le Code
版权声明
本文为[Benbinbin]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/10/20211013172514697x.html

  1. Error in spring source code compilation: the monoprocessor in reactor.core.publisher is outdated
  2. Buctf [geek Challenge 2019] http
  3. 20 个值得学习的 Vue 开源项目
  4. 20 projets open source à apprendre
  5. Scène et application de la manette des gaz anti - bavardage
  6. Qu'est - ce que j'ai gagné en abandonnant vue pour les six mois de React?
  7. À partir de [Bytecode cache] et de [http cache], intervieweur: « est - ce si mince? »
  8. [niveau intermédiaire et avancé] obligatoire, 30 + questions manuscrites à haute fréquence et réponses détaillées (dix mille caractères longs), voyez comment "vous" ne pouvez pas m'abattre
  9. Mise en œuvre d'un outil d'échafaudage universel pour l'ingénierie Web de 0 à 1
  10. 【中高级前端】必备,30+高频手写题及详细答案(万字长文),看“你”怎么难倒我
  11. In less than two days, the box office exceeded 400 million, and Changjin Lake broke out, breaking seven records in Chinese film history
  12. Tong Liya Jin Chen bumps her hair, Xie Na Zhao Liying bumps her shirt, and she sees EQ from the reaction
  13. react之组件生命周期
  14. L'équipe de vue dévoile un nouvel outil d'échafaudage rapide comme la foudre Create View, qui remplacera la vue CLI à l'avenir, avec seulement 300 lignes de code, apprenez - le!
  15. 20 dessins illustrant le fonctionnement du moteur de rendu du Navigateur
  16. In less than two days, the box office exceeded 400 million, and Changjin Lake broke out, breaking seven records in Chinese film history
  17. 千锋重庆web前端学习之理解CSS位置属性
  18. 什么是语义HTML标记以及如何使用它们?
  19. Si vous vous représentez avec un tableau, c'est le champ de Van Gogh.
  20. 前端面试手写代码
  21. 前端开发框架Vue中Vuex的使用原理分享
  22. vue-echarts初次体验
  23. 分享一些web前端开发好用的网站
  24. 每天读一点webpack-003
  25. react之组件生命周期
  26. Alibaba collection version of mybatis handwritten documents, Java front-end interview questions
  27. SpringBoot Java后端实现okhttp3超时设置
  28. react之組件生命周期
  29. Cycle de vie des composants de React
  30. 使用Reactor将阻塞调用变为异步非阻塞
  31. Baked cake wife sun photos, plain face on camera, beautiful appearance is still a beauty, watching children during the festival is a little helpless
  32. 亚洲知名插画师荒川(arakawa) 仅8件独版NFT作品系列《Can't Out》正式上架Element综合市场
  33. Taiyuan: singing, welcoming the national day, gathering to praise blessings
  34. Arakawa, un illustrateur Asiatique bien connu, n'a mis sur le marché que huit pièces de la collection NFT "can't out" en une seule édition.
  35. Résumé des questions d'entrevue Hadoop (II) - - hdfs
  36. 如何解决“Serverless”系统的冷启动问题
  37. BootstrapBlazor 模板安装
  38. BootstrapBlazor 模板安装
  39. Tong Liya Jin Chen bumps her hair, Xie Na Zhao Liying bumps her shirt, and she sees EQ from the reaction
  40. 使用ESLint+Prettier来统一前端代码风格
  41. 为什么说 Node.js 是实时应用程序开发的绝佳选择
  42. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  43. 使用elementui在完成项目中遇到的未知知识点2
  44. On the mechanism of webpack loader
  45. 云原生体系下 Serverless 弹性探索与实践
  46. vue开发技巧
  47. Une fleur merveilleuse de l'histoire de l'industrie des nouveaux véhicules énergétiques, Zhongtai Jiangnan T11, une voiture vintage que vous n'avez jamais vue
  48. 致敬!再见了!LayUI !
  49. Vue安装和卸载
  50. Implement a flipped character with the transform attribute of CSS
  51. 你的第一个 Docker + React + Express 全栈应用
  52. [apprentissage de l'algorithme] 1486. Fonctionnement exclusif du tableau (Java / C / C + + / python / go / Rust)
  53. Zhang Daxian sends a blessing video on xYG relay, showing positive energy in details
  54. 前端技巧-JS元编程ES6 symbol公开符号
  55. Article de 37 ans seul à l'hôpital!Il boitait, soupçonnait d'être blessé, souriait avec douleur
  56. 前端推荐!10分钟带你了解Konva运行原理
  57. npm ERR! iview-project@3.0.0 init: `webpack --progress --config webpack.dev.config.js
  58. 零基础学习Web前端需要注意什么呢?
  59. The Youth League promotes Yiyang Qianxi new film, and the relationship between the two generation and the generation is good. Li Fei is blessed.
  60. Qu'est - ce qu'il faut remarquer à l'avant - plan Web de l'apprentissage de base zéro?