ساخت اکستنشن کروم با React و TypeScript — راهنمای کاربردی

در این مقاله یک اکستنشن کروم با استفاده از TypeScript می‌سازیم. از React نیز برای popup استفاده می‌کنیم. اگر با مراحل ساخت اکستنشن‌ها آشنا هستید، لزومی به مطالعه این راهنما وجود ندارید و می‌توانید کد مربوطه را از این لینک (+) دریافت کنید. ما می‌خواهیم چند مشکل را که در زمان ساخت اکستنشن شایع است در خلال این راهنمای مبتدی مطرح کنیم. بدین ترتیب با مراحل ساخت اکستنشن کروم با React و TypeScript آشنا خواهید شد.

در صورتی که دست‌کم دانشی مقدماتی در مورد ساخت اپلیکیشن‌ها با webpack و TypeScript داشته باشید، درک این مقاله بسیار آسان‌تر خواهد شد و در صورتی که قبلاً اکستنشن کروم ساخته باشید که شرایط بسیار مساعدتر خواهد بود.

مبانی مورد نیاز

ترمینال را در پوشه‌ای که می‌خواهید استفاده کنید، باز کنید و پروژه خود را با دستور زیر init کنید:

$ npm init –y

نخست پوشه‌ها و فایل‌ها را ایجاد کنید:

$ mkdir src && cd src && mkdir assets background contentscript
$ cd background && touch background.ts
$ cd../contentscript && touch contentscript.ts contentscript.scss

اولین دسته از وابستگی‌ها را نصب کنید:

$ npm i -D @types/chrome @types/node awesome-typescript-loader css-loader mini-css-extract-plugin node-sass sass-loader ts-node tslint typescript webpack@4.29.6 webpack-cli

نکته: در زمان نگارش این مقاله، Create-react-app از webpack@4.29.6 استفاده می‌کرد و ما برای کامپایل موفق اپلیکیشن باید از همان نسخه وب‌پک استفاده کنیم.

راه‌اندازی Webpack

در دایرکتوری ریشه، فایل‌های tsconfig.json و webpack.config.js را ایجاد کنید:

$ touch tsconfig.json webpack.config.js

محتوای این فایل‌ها را به صورت زیر اضافه کنید:

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

فایل tsconfig.json

1{
2  "compileOnSave": false,
3  "compilerOptions": {
4    "target": "es5",
5    "module": "commonjs",
6    "sourceMap": false,
7    "types": ["@types/chrome", "node"],
8    "typeRoots": ["node_modules/@types"],
9    "moduleResolution": "node",
10    "lib": ["es2017", "dom"]
11  },
12  "include": ["src/background", "src/contentscript"]
13}

فایل webpack.config.js

1const { CheckerPlugin } = require('awesome-typescript-loader');
2const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3const { optimize } = require('webpack');
4const { join } = require('path');
5let prodPlugins = [];
6if (process.env.NODE_ENV === 'production') {
7  prodPlugins.push(
8    new optimize.AggressiveMergingPlugin(),
9    new optimize.OccurrenceOrderPlugin()
10  );
11}
12module.exports = {
13  mode: process.env.NODE_ENV,
14  devtool: 'inline-source-map',
15  entry: {
16    contentscript: join(__dirname, 'src/contentscript/contentscript.ts'),
17    background: join(__dirname, 'src/background/background.ts'),
18  },
19  output: {
20    path: join(__dirname, 'dist'),
21    filename: '[name].js',
22  },
23  module: {
24    rules: [
25      {
26        exclude: /node_modules/,
27        test: /\.ts?$/,
28        use: 'awesome-typescript-loader?{configFileName: "tsconfig.json"}',
29      },
30      {
31        test: /\.scss$/,
32        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
33      },
34    ],
35  },
36  plugins: [
37    new CheckerPlugin(),
38    ...prodPlugins,
39    new MiniCssExtractPlugin({
40      filename: '[name].css',
41      chunkFilename: '[id].css',
42    }),
43  ],
44  resolve: {
45    extensions: ['.ts', '.js'],
46  },
47};

کارکرد این کدها را در اینجا توضیح نمی‌دهیم، زیرا پیکربندی ساده Webpack هستند و کد خود کاملاً گویا است. در این کد به وب‎پک اعلام می‌کنیم که از فایل‌های background.ts و contentscript.ts استفاده کند و به وسیله آن جاوا اسکریپت را traspile کرده، فایل‌های scss. را به css. تبدیل کند.

در ادامه یک اسکریپت در package.json ایجاد می‌کنیم تا از این پیکربندی Webpack استفاده کند.

1{
2...
3  "scripts": {
4    "build:contentscript-background": "NODE_ENV=production webpack --config webpack.config.js",
5    "build": "npm run build:contentscript-background",
6    "watch:contentscript-background": "NODE_ENV=development webpack --config webpack.config.js -w",
7    "watch": "npm-run-all -parallel watch:*"
8  }
9...
10}

اکنون دستورهای زیر را اجرا می‌کنیم تا برخی فایل‌ها در پوشهdist/. ایجاد شوند:

npm run watch and
npm run build

تا به اینجا حالت توسعه و پروداکشن را برای اسکریپت‌های پس‌زمینه و محتوا ساخته‌ایم.

افزودن Manifest.json

فایل Manifest.json به کروم اعلام می‌کند که باید با همه فایل‌ها چه کار بکند و برخی ظرفیت‌های اکستنشن را تعریف می‌کند. در ادامه این فایل را در دایرکتوری ریشه می‌سازیم.

$ touch manifest.json

محتوای زیر را به آن اضافه می‌کنیم:

1{
2  "manifest_version": 2,
3  "name": "My chrome extension",
4  "version": "1.0.0",
5  "permissions": ["tabs", "activeTab", "storage"],
6  "content_scripts": [
7    {
8      "js": ["contentscript.js"],
9      "css": ["contentscript.css"],
10      "matches": ["<all_urls>"]
11    }
12  ],
13  "background": {
14    "scripts": ["background.js"],
15    "persistent": false
16  },
17  "web_accessible_resources": ["assets/*"],
18  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
19}

پوشه dist/. همان پوشه‌ای خواهد بود که در ادامه به کروم ایمپورت می‌کنیم.

این پوشه همواره باید یک کپی از manifest.json داشته باشد. به این منظور باید سه اسکریپت جدید را به package.json اضافه کنیم:

1{
2...
3  "scripts": {
4    ...
5    "clean": "rm -rf dist && cpy manifest.json dist && cpy src/assets/* dist/assets",
6    "prebuild": "npm run clean",
7    "prewatch": "npm run clean"
8  }
9...
10}

• اسکریپت clean اقدام به پاکسازی پوشه dist/. کرده و یک کپی تازه از manifest.json در آن ایجاد می‌کند. همچنین این اسکریپت پوشه‎./assets ‎ ما را به پوشه dist/. کپی می‌کند.
• اسکریپت‌های prebuild و prewatch هر بار که اسکریپت watch یا build را اجرا کنیم و پیش از اجرای اسکریپت واقعی فراخوانی می‌شوند.

چنان که می‌بینید ما از پکیج cpy-cli برای کپی کردن فایل‌ها استفاده می‌کنیم. بنابراین نباید فراموش کنید که آن را نصب کنید:

$ npm i -D cpy-cli

ایمپورت به کروم

در این مرحله تلاش می‌کنیم اکستنشن خود را به کروم ایمپورت کنیم. اسکریپت watch را با دستور زیر اجرا کنید تا کد کامپایل شود و سپس کروم باز می‌شود:

npm run watch

در کروم به منوی Menu > More tools > Extensions بروید و روی Load Unpacked کلیک کرده و پوشه dist/. را انتخاب کنید.

اینک اکستنشن باید به کروم اضافه شده باشد و اگر محتوایی به فایل‌های background.ts یا contentscript.ts افزوده باشید باید آن‌ها را در کنسول‌های مربوطه ببینید.

ایجاد Popup مبتنی بر React

ما در این بخش قصد داریم به منظور ساده‌سازی امور از create-react-app استفاده کنیم. اگر آن را نصب نکرده‌اید باید پکیج مربوطه را نصب کنید. به پوشه src/. بروید و create-react-app را اجرا کنید.

فیلم آموزش برنامه نویسی تایپ اسکریپت TypeScript در جاوا اسکریپت در فرادرس

کلیک کنید

نکته: از نام popup استفاده کنید چون ما در ادامه از این نام استفاده خواهیم کرد.

$ npm i -g create-react-app && cd src && create-react-app popup –typescript

آخرین نسخه پکیج امکان تعیین فلگ typescript- را به ما می‌دهد و بدین ترتیب یک اپلیکیشن آماده کدنویسی با تایپ‌اسکریپت خواهیم داشت.

در اینجا با نخستین مشکل خود مواجه می‌شویم.

ما باید کد کامپایل شده ری‌اکت خود را در پوشه dist/. دایرکتوری root قرار دهیم. این کار به سادگی ممکن است، اما باید هر بار که یک خط کد را تغییر می‌دهیم باید از npm run build استفاده کنیم تا بینیم آیا کار می‌کند یا نه و این وضعیت بغرنجی است.

در عمل هم نمی‌توانیم از npm run start استفاده کنیم، زیرا به فایل‌های تولید شده دسترسی نداریم و لذا نمی‌توانیم آن‌ها را در پوشه dist/. قرار دهیم. برای این که بتوانیم فایل‌هایمان را همزمان کامپایل و رصد بکنیم باید از پکیجی به نام cra-build-watch استفاده کنیم. در ترمینال به دایرکتوری root رفته و پکیج زیر را نصب کنید:

$ npm i -D cra-build-watch

اکنون فایل package.json مربوط به اپلیکیشن ری‌اکت اخیراً ایجاد شده را باز کنید. اسکریپت زیر را اضافه کنید. همچنین تنظیمات صفحه اصلی را اضافه کنید تا مطمئن شوید که همه مسیرهای فایل‌ها نسبت به index.html تعریف شده‌اند.

1{
2  "homepage": "./",
3  ...
4  "scripts": {
5    ...
6    "watch:build": "cra-build-watch -v --build-path ../../dist/popup"
7  }
8...
9}

یک بار دیگر فایل package.json را در دایرکتوری root باز کنید و اسکریپت زیر را که از آن برای رصد تغییرات فایل در اپلیکیشن React استفاده می‌کنیم اضافه کنید:

1{
2  ...
3  "scripts": {
4    ...
5    "watch:popup": "npm run watch:build --prefix src/popup"
6  }
7...
8}

نکته: به فلگ prefix که امکان رفتن به دایرکتوری دیگر را می‌دهد توجه کنید.

اگر همه کارها به درستی پیش رفته باشد و با دستور زیر در دایرکتوری اصلی تست کرده باشید، اسکریپت هم اینک باید در پس‌زمینه اسکریپت محتوا و popup ری‌اکت را کامپایل کند و همه چیز را در پوشه dist/. قرار دهد:

npm run watch

اسکریپت آخر زیر را نیز به فایل package.json اضافه کنید. این اسکریپت امکان ساخت popup ری‌اکت را به ما می‌دهد:

1{
2  ...
3  "scripts": {
4    ...
5    "build:popup": "npm run build --prefix src/popup && cd src/popup/build && cpy * /static/* ../../../dist/popup --parents"
6  }
7  ...
8}

علاوه بر ساخت اپلیکیشن این اسکریپت آن را به پوشه dist/. دایرکتوری root نیز کپی می‌کند. ما باید فایل manifest.json اکستنشن کروم خود را به‌روزرسانی کنیم تا بداند که یک popup هم وجود دارد:

1{
2  ...,
3  "browser_action": {
4    "default_popup": "popup/index.html",
5    "default_title": "React Chrome Extension Starter"
6  },
7}

اکنون می‌توان با اجرای دستور زیر اکستنشن را همانند قبل به کروم اضافه کرد:

npm run build

خطای کروم

اینک اگر روی آیکون اکستنشن کلیک کنید یک مربع سفید می‌بینید و popup ری‌اکت مورد انتظار باز نمی‌شود. اگر روی مربع سید راست+کلیک کنید، با انتخاب گزینه inspect کنسول توسعه‌دهندگان مرورگر باز می‌شود. این خطا در کنسول مشاهده می‌شود:

این آخرین مشکل ما است. چنان که می‌بینید کروم اسکریپت‌های درون‌خطی را در اکستنشن بلوکه کرده است. نسخه build اپ ری‌اکت ما مقدار اسکریپت درون‌خطی دارد که در فایل index.html کامپایل شده‌اند.

چنان که در کنسول نوشته شده است یکی از روش‌های حل این مشکل کپی کردن SHA این پیام و افزودن آن به تنظیمات “content_security_policy” فایل manifest.json مانند زیر است:

1{
2  ...,
3  "content_security_policy": "script-src 'self' 'unsafe-eval' 'sha256-....'; object-src 'self'"
4}

یک بار دیگر دستور زیر را اجرا کنید:

npm run build

اکستنشن را بار دیگر در مرورگر بارگذاری کنید. اگر روی آیکون اکستنشن کلیک کنید باید ببینید که اپلیکیشن ری‌اکت روی صفحه بارگذاری می‌شود:

فشرده‌سازی اکستنشن

اگر می‌خواهید از یک اسکریپت برای فشرده‌سازی اکستنشن خود استفاده کنید، پکیج bestzip را نصب کنید و اسکریپت زیر را به فایل اصلی package.json اضافه کنید:

$ npm i -D bestzip

1{
2  ...
3  "scripts": {
4    ...
5    "zip": "bestzip extension.zip dist/*"
6  }
7  ...
8}

سخن پایانی

بدین ترتیب به پایان این مقاله می‌رسیم. شما اینک با روش ساخت اکستنشن‌های کروم با استفاده از تایپ‌اسکریپت و ری‌اکت آشنا شده‌اید. امیدواریم از مطالعه این راهنما بهره آموزشی لازم را برده باشید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌‌نویسی
• مجموعه آموزش‌های جاوا اسکریپت
• مجموعه آموزش‌های استفاده از سرویس‌‌های Google (گوگل)
• امکانات گوگل کروم — راهنمایی از صفر تا صد
• ۱۰ افزونه کروم برای مدیریت کسب و کار — فهرست جامع

==