Bài 02 – Tích hợp Webpack cho Chrome Extension

Xin chào mọi người!

Chào mừng bạn đã đến với series/tutorial Lập trình Chrome extension với Typescript + Vue.js.

Trong bài hôm nay, chúng ta sẽ tiếp tục khắc phục các vấn đề khi build Chrome Extension trong bài trước.

First look

Bài trước, nếu bạn để ý thì sẽ thấy yarn serve, yarn build thực chất là script alias tới vue-cli-service. Vue CLI Service cũng sử dụng webpack nhưng tại thời điểm hiện tại thì việc customize với webpack còn gặp một số vấn đề hạn chế:

• Multi entrypoints với webpack
• Config webpack theo document nhưng không nhận config webpack mới

Hy vọng trong thời gian tới chúng ta có thể tùy biến được tốt hơn.

Chúng ta sử dụng vue-cli-service để thực hiện build Vue.js và TypeScript thành js “thuần” một cách rất nhanh chóng. Vậy thì thực sự, vue-cli-service đã làm giúp chúng ta những gì? Dưới đây là một số thứ điển hình:

1. Compile Vue.js + TypeScript và extract thành file dist/js/app.[hash].js
2. Compile SASS/CSS và extract thành file dist/css/app.[hash].css
3. Inject các file JavaScript và CSS sau khi build thành công vào file dist/index.html
4. Đóng gói các library dùng chung giữa các Vue component vào trong chunk-vendors.[hash].js. Ví dụ như: Vue.js, vue-class-component

Cài đặt dependency

Install Webpack

Chính bởi lẽ hạn chế ở trên nên mình sẽ dùng trực tiếp Webpack mà không còn dùng qua vue-cli-service như trước nữa. Chúng ta cần config một chút với webpack để thực hiện những việc mà vue-cli-service đã làm ở trên. Đồng thời giải quyết các vấn đề đang gặp ở bài trước.

Bây giờ, hãy cùng mình cài đặt phiên bản mới nhất là v4.41.5. Và chúng ta sẽ vẫn tiếp tục cài đặt qua yarn nhé:

Kí tự $ là ký tự nhắc dòng lệnh trên terminal của mình, vui lòng bỏ qua.

Install Loaders for webpack

Do không dùng qua vue-cli-service nên mình sẽ cần cài đặt thêm một số loader để phục vụ việc compile một các file cần thiết như .vue|.ts|.ts|.css|.scss.

Trong đó:

• vue-loader: compile Vue.js
• ts-loader: compile code TypeScript
• css-loader node-sass sass-loader: phục vụ cho việc compile CSS, SASS.

Install Webpack Plugins

Tiếp tục, chúng ta cài đặt thêm webpack plugin cần thiết khác là mini-css-extract-plugin, html-webpack-plugin, copy-webpack-plugin và cross-env:

Refactor code & folder structure

Sử dụng templates/popup.html

Do không dùng vue-cli-service để build nên thư mục public cũng hơi thừa, mình sẽ chuyển public/index.html tới templates/popup.html, rồi sau đó xóa bỏ folder public không còn cần thiết.

Xóa bỏ thẻ link không dùng trong templates/popup.html, cuối cùng nội dung sẽ như sau:

Update NPM scripts

Các lệnh build, serve cũng được chuyển qua dùng webpack:

Trong đó:

• webpack -w sẽ thêm file watcher, giúp tự build lại source code mỗi khi file source code bị sửa đổi
• cross-env giúp mình define environment variable như NODE_ENV

Bây giờ lệnh serve không còn serve web server để chúng ta truy cập qua http://localhost:8080 như trước nữa, mà chỉ là tạo watcher để tự build lại code. Do đó, mình sẽ đổi command alias từ serve thành start.

Refactor folder structure

Vì thông thường, một browser extension có thể có nhiều thành phần chứ không chỉ riêng popup. Để gọn gàng hơn một chút, chúng ta sẽ làm gọn gàng hơn một chút giống Viblo Browser Extension đó là chuyển code của popup vào một folder riêng tên là src/popup. Nhân tiện, chúng ta tạo sẵn một folder src/content-scripts với một file main.ts ở trong với nội dung:

Cấu trúc thư mục src bây giờ sẽ trở thành:

Cấu hình webpack

Tạo file webpack.config.js

Như bạn đã thấy, chúng ta sẽ setup webpack để compile code cho hai thành phần trong extension gồm:

• src/content-scripts
• src/popup

Chúng ta cần compile chúng thành 2 file riêng biệt, do đó, mình sẽ cần tạo 2 entrypoint cho webpack. Rất tiếc, webpack chỉ support 1 entrypoint mà thôi. Do đó chúng ta phải config webpack riêng biệt cho từng cái.

Config webpack cho content-scripts

MÌnh sẽ có một bài tiếp theo về các thành phần trong browser extension, cũng như chức năng, tác dụng của chúng để mọi người hiểu nên trong bài này bạn hãy tạm hiểu content-scripts sẽ là các script của mình để thực hiện thao tác với DOM của một trang web bạn đang truy cập. Ví dụ, khi chúng ta vào trang Viblo và muốn đổi background của trang từ trắng sang đen, code xử lý đó sẽ được đặt trong content-scripts và khai báo trong manifest.json để browser thực thi.

Content-scripts của mình cũng khá đơn giản vì chỉ là code TypeScript, dó đó, chúng ta chỉ cần sử dụng babel-loader và ts-loader trong webpack là đủ. File cấu hình sẽ như sau:

Tạm thời chúng ta có thể comment dòng số 2 và 6 trong webpack.config.js như này để build thử:

Config webpack cho Popup

Popup thì config nhiều hơn một chút vì nó phải làm khá nhiều thứ với Vue.js, TypeScript, Images, SASS.