Giới thiệu
Ở dự án hiện tại của mình, mình phải làm việc và thao tác với khá nhiều microservice, có khá nhiều chức năng mình code ra chỉ dành để test mà chưa được merge vào nhánh phát truyển vì thế mình nghĩ ra 1 ý tưởng là tạo 1 sticknote để note thông tin lên các merge request, và note các thông tin ở 1 số trang mà mình hay truy cập để học tập và giải trí lúc rảnh rỗi. Tiện thể mình xin chia sẻ cách viết 1 extension chrome cơ bản thông qua extension sticknote mà mình đã tạo.
Đối tượng
- Dành cho người mới bắt đầu tìm hiểu về extension
Code
Đầu tiên ta tạo file manifest.json đại diện cho main của extension trong này sẽ chứa tất cả các cấu hình của extension như tên, file js được nhúng vào trang web…
{
"//name": "thuộc tính name định nghĩa tên của extension",
"name": "Stick Notes",
"//version": "version extension bạn có thể đánh tùy ý",
"version": "1.0",
"//manifest_version": "version của mainfest cái này phụ thuộc vào version của chrome",
"manifest_version": 2,
"description" : "stickNote by thangnotes.name.vn",
"background": {
"//background":"file js được nhúng ở backgroud của extension thường dùng cho cài đặt, setting...",
"scripts": ["js/background.js"]
},
"content_scripts": [
{
"//matches": "nhúng file js và css vào trang web ở đây mình include cho tất cả trang web",
"matches": [ ""],
"js": [
"js/jquery-3.6.1.min.js",
"js/jquery-ui.min.js",
"js/sticknote.js"
],
"css": [ "sticknote.css" ]
}
],
"browser_action": {
"default_icon": "icon.png",
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
},
"default_title": "",
"default_popup": "popup.html"
},
"permissions" : [
"clipboardWrite",
"storage",
"contextMenus",
"history",
""
]
}
Tiếp theo ở đây chúng ta tạo 1 file popup.html để view trang html khi chúng ta ấn vào extension
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="alert">
<h2>Stick Note</h2>
<p></p>
</div>
<div class="container">
<h2>Hướng dẫn Stick Notes</h2>
<ul>
<li>
+ click chuột phải để setting notes <br>
+ click chuột phải 2 lần để thêm note
</li>
<li>
</li>
</ul>
</div>
<div class="signature">
<p>Made with <i class="much-heart"></i> by <a
href="https://thangnotes.name.vn">https://thangnotes.name.vn</a></p>
</div>
<script src="jquery-3.6.0.min.js"></script>
</body>
<style>
@import url('https://fonts.googleapis.com/css?family=Lato');
body,
html {
height: 100%;
background: #222222;
font-family: 'Lato', sans-serif;
}
.container {
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
}
h2 {
color: #AAAAAA;
}
.container ul {
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
}
ul li {
color: #AAAAAA;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
border-bottom: 1px solid #333;
}
ul li input[type=radio] {
position: absolute;
visibility: hidden;
}
ul li label {
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label {
color: #FFFFFF;
}
ul li .check {
display: block;
position: absolute;
border: 5px solid #AAAAAA;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #FFFFFF;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked~.check {
border: 5px solid #0DFF92;
}
input[type=radio]:checked~.check::before {
background: #0DFF92;
}
input[type=radio]:checked~label {
color: #0DFF92;
}
.signature {
margin: 10px auto;
padding: 10px 0;
width: 100%;
}
.signature p {
text-align: center;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 0.85em;
color: #AAAAAA;
}
.signature .much-heart {
display: inline-block;
position: relative;
margin: 0 4px;
height: 10px;
width: 10px;
background: #AC1D3F;
border-radius: 4px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.signature .much-heart::before,
.signature .much-heart::after {
display: block;
content: '';
position: absolute;
margin: auto;
height: 10px;
width: 10px;
border-radius: 5px;
background: #AC1D3F;
top: -4px;
}
.signature .much-heart::after {
bottom: 0;
top: auto;
left: -4px;
}
.signature a {
color: #AAAAAA;
text-decoration: none;
font-weight: bold;
}
/* Styles for alert...
by the way it is so weird when you look at your code a couple of years after you wrote it XD */
.alert {
box-sizing: border-box;
background-color: #BDFFE1;
width: 100%;
position: relative;
top: 0;
left: 0;
z-index: 300;
padding: 20px 40px;
color: #333;
}
.alert h2 {
font-size: 22px;
color: #232323;
margin-top: 0;
}
.alert p {
line-height: 1.6em;
font-size: 18px;
}
.alert a {
color: #232323;
font-weight: bold;
}
</style>
tiếp theo chúng ta sẽ tạo thêm 1 thư mục js để chứa các file js, trong thư mục này chúng ta sẽ bắt đầu tạo thêm các file js đã được config trong manifest.json.
trong thư mục js chúng ta sẽ lần lượt tạo các file
background.js : có nhiệm vụ tạo menu khi ta click chuột phải
chrome.contextMenus.create({
id: "on",
title: "Mở StickNote",
contexts: ["all"]
});
chrome.contextMenus.create({
id: "off",
title: "Tắt StickNote",
contexts: ["all"]
});
chrome.contextMenus.create({
id: "on-not-add",
title: "Tắt add StickNote",
contexts: ["all"]
});
chrome.contextMenus.create({
id: "remove-all-with-page",
title: "Xóa tất cả StickNote trong page",
contexts: ["all"]
});
chrome.contextMenus.create({
id: "remove-all",
title: "Xóa tất cả StickNote",
contexts: ["all"]
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
if (tab) {
if (info.menuItemId === "on"){
var code = ' localStorage.setItem("sticknote-setting", "on"); alert("Đã mở stickNote"); location.reload();';
chrome.tabs.executeScript(tab.id, { code: code });
}
if (info.menuItemId === "off"){
var code = 'localStorage.setItem("sticknote-setting", "off"); alert("Đã tắt stickNote"); location.reload();';
chrome.tabs.executeScript(tab.id, { code: code });
}
if (info.menuItemId === "on-not-add"){
var code = 'localStorage.setItem("sticknote-setting", "on-not-add"); alert("Đã tắt thêm stickNote"); location.reload();';
chrome.tabs.executeScript(tab.id, { code: code });
}
if (info.menuItemId === "remove-all-with-page"){
var code = 'var listData = JSON.parse(localStorage.getItem("dataNote")); var listNew = listData.filter(x => {return x.url != window.location.href;}); localStorage.removeItem("dataNote"); localStorage.setItem("dataNote", JSON.stringify(listNew)); alert("đã xóa tất cả stickNote"); location.reload();';
chrome.tabs.executeScript(tab.id, { code: code });
}
if (info.menuItemId === "remove-all"){
var code = 'localStorage.removeItem("dataNote"); location.reload();';
chrome.tabs.executeScript(tab.id, { code: code });
}
}
});
sticknote.js: có nhiệm vụ xử lý thêm sửa xóa notes trên trang web tham khảo ở source bên dưới
để import extension chúng ta mở chrome và gõ địa chỉ chrome://extensions mở develop mode và chon load unpacked chọn tới thư mục của extension và ấn import sẽ được như hình
Cuối cùng tận hưởng thành quả
Cảm ơn các bạn đã đọc bài.!
Link source: Source stickNote
