Tạo Chrome Extension với hai nút bấm để thực thi `code1.js` và `code2.js`
Dưới đây là các bước để tạo một Chrome Extension với hai nút bấm để thực thi code1.js và code2.js:
Mục lục
1. Cấu trúc thư mục
Tạo cấu trúc thư mục sau:
my-chrome-extension/
├── manifest.json
├── popup.html
├── popup.js
├── code1.js
├── code2.js
└── icon.png (tuỳ chọn)2. Tệp manifest.json
Khai báo file cấu hình cho extension:
{
"manifest_version": 3,
"name": "Execute JS Codes",
"version": "1.0",
"description": "Thực thi code1.js và code2.js từ extension.",
"permissions": ["scripting", "activeTab"],
"host_permissions": ["<all_urls>"],
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
}
}3. Tệp popup.html
Tạo giao diện với hai nút bấm:
<!DOCTYPE html>
<html>
<head>
<title>Execute JS</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 10px;
text-align: center;
}
button {
width: 100%;
margin: 5px 0;
padding: 10px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h3>Execute JavaScript</h3>
<button id="runCode1">Run Code 1</button>
<button id="runCode2">Run Code 2</button>
<script src="popup.js"></script>
</body>
</html>4. Tệp popup.js
Thêm logic để thực thi code1.js và code2.js khi nhấn nút:
document.getElementById('runCode1').addEventListener('click', () => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
files: ['code1.js']
});
});
});
document.getElementById('runCode2').addEventListener('click', () => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
files: ['code2.js']
});
});
});5. Tệp code1.js và code2.js
Đặt đoạn mã JavaScript bạn muốn chạy trong hai tệp code1.js và code2.js.
code1.js:
console.log("Code 1 executed!");
alert("Code 1 is running!");code2.js:
console.log("Code 2 executed!");
alert("Code 2 is running!");6. Cách chạy extension
- Mở Chrome.
- Truy cập
chrome://extensions/. - Bật chế độ "Developer mode".
- Nhấn nút "Load unpacked" và chọn thư mục chứa extension.
- Extension sẽ xuất hiện trên thanh công cụ.
Bình luận gần đây