3. Popup page

Đy l trang sẽ chạy v hiển thị khi bạn mở extension của mnh ln. Cấu trc của n cũng tương tự như những trang HTML khc. Trong trường hợp của mnh th đ trangpopup.html. Trang ny được chạy ở một mi trường khc so với cc content script. C thể hiểu nm na l chng được chạy ở một cửa sổ trnh duyệt khc so với cửa sổ trnh duyệt hiện tại.

!doctype html
html lang="en"
head
meta charset="utf-8"
link rel="stylesheet" href="./styles/lib/bootstrap.min.css"
link rel="stylesheet" href="./styles/page.css"
titleMy Extension/title
/head
body
div class="wrapper"
h1This is popup page/h1
/div
script src="./scripts/lib/bootstrap.min.js"/script
script type="module" src="./scripts/popup.js"/script
/body
/html

Bạn sẽ tạo giao diện chnh cho extension của mnh tại đy. Trang sẽ được load lại mỗi khi extension được mở. Bạn c thể sử dụnglocalStorageđể lưu trữ dữ liệu giống như một database.

4. Background page

Cũng giống như trangpopup.html, trangbackground.htmlcũng sẽ chạy cng một mi trường. Tuy nhin n khng c giao diện m đơn thuần chỉ chứa một script tag với mục đch đưa vo đ filebackground.js.

html
body
script type="module" src="./scripts/background.js"/script
/body
/html

Mặc định trang ny sẽ được tự động sinh ra v tự động inject filebackground.js, nhưng trong trường hợp bạn muốn custom n th đy sẽ l nơi để bạn thực hiện điều đ

Filebackground.jsđược sử dụng với mục đch tương tự như một server, n lắng nghe cc sự kiện được gọi từ trang popup hay trang content. Xử l, lưu trữ dữ liệu cũng như l trả về data trong response.

Giao tiếp gữa cc thnh phần

Vừa rồi chng ta đ phần no hiểu được chức năng của cc thnh phần trong một extension. Như chng ta đ biết, filecontent.jsđược chạy cng với trang web hiện tại m n được inject vo. Trong khi đ,popup.jsvbackground.jsđược chạy ở cng một mi trường v chng tch biệt hon ton so với của sổ hiện tại m trnh duyệt đang hiển thị. V thế, để c sự kết nối giữa cc file script ở cc mi trường khc nhau, Chrome sử dụng cc message để thể hiện sự giao tiếp đ.

Chng ta sẽ cng nhau lm mt v dụ để hiểu hơn vấn đề ny nh. Extension của chng ta sẽ c chức năng l lưu lại cc bi ht m mnh thch trnhttps://www.nhaccuatui.com/để hng ngy c thể nghe lại chng m khng phải mất cng tm kiếm. Tất nhin l thực tế th trang nhạc no cũng c chức năng tạo playlist rồi. No hy cng bắt đầu thi.

content.js

Trong phần ny, chng ta sẽ xử l việc chn thm vo trang một button m khi click vo n, chng ta sẽ lấy dữ liệu ở trang hiện tại v gửi ln chobackground.jsxử l:

window.onload = function () {
var button = document.createElement('button');

button.innerHTML = 'Add to Playlist';
document.body.prepend(button);

button.addEventListener('click', function () {
var link = window.location.href;
var name = document.querySelector('.name_title').innerText;
chrome.extension.sendMessage({
type: 'add-song',
data: {link, name}
});
});
}

Để rằng, ở thuộc tnhmatchestrongmanifest.json, chng ta c một gi trị l"*://nhaccuatui.com/bai-hat/*". Như vậy đoạn script trn sẽ chỉ được chạy ở trang m bi ht đang được pht.

background.js

Vừa rồi ởcontent.jschng ta đ gửi một message đi. Vậy muốnbackground.jsnhận được thng điệp ny th chng ta phải đăng k cho n lắng nghe những request được gửi đến

chrome.extension.onMessage.addListener(
function (request) {
switch(request.type) {
case 'add-song':
addSong(data);
break;
case 'remove-song':
break;
}
});

function addSong(data) {
var songs = getSongs();
songs.push(data);
localStorage.songs = JSON.stringify(songs)
}

function getSongs() {
if (!localStorage.songs) {
localStorage.songs = JSON.stringify([]);
}

return JSON.parse(localStorage.songs);
}

Khi nhận được message, chng thực hiện lưu data vo tronglocalstorage.

popup.js

Như đ thấy chng ta sử dụngpopup.jstrong trangpopup.htmldo đ tại đy chng ta sẽ xử l ởpopup.jsđể hiển thị danh sch cc bi ht đ được lưu.

$(document).ready(function () {
var songs = JSON.parse(localStorage.songs || '[]');
var songHTML = null;

songs.forEach(song = {
songHTML = $(`a href="${song.link}" target="_blank"${song.name}/a`);
$('.wrapper').append(songHTML);
})
});

Như vậy, mỗi lần extension được mở ra, chng ta sẽ thấy danh sch cc bi ht m mnh đ lưu được hiển thị ra ở đy. Bạn c thể thm cc tnh năng khc nữa như tự động pht cc bi ht trong danh sch, hay download tất cả chng về my của mnh.

Load extension

• Cc bạn vo google chrome, g vo địa chỉchrome://extensions/
• Click vo nutLoad unpackedbn gc tri mn hnh
• Tm đến folder chứa extension của chng ta, thế l xong

Tổng kết

Vừa rồi chng ta đ tm hiểu về cc thnh phần của một chrome extension cũng như cc chức năng v sự giao tiếp giữa chng. Hi vọng với những chia sẻ đ, cc bạn sẽ phần no hiểu hơn về cấu trc của một extension để c thể tự tạo ring cho mnh một extension, phục vụ cc nhu cầu của bản thn.