创建一个web扩展跟踪时间在网站上

Question

我是web扩展的相对新手。我的想法是，我想创建一个网络扩展，输入一个整数，通过一个弹出窗口，当用户进入一个娱乐网站。当这个限制用完后，我想根据一天中的时间在给定的时间内阻止该网站。

到目前为止，我已经创建了这个清单。json文件:

{
"manifest_version": 3,
"name": "Entertainment Time Tracker",
"version": "1.0.0",
"description": "Tracks time spent on entertaining websites and allows the user to set time limits for each session.",
"permissions": [
"activeTab", "<all_urls>", "declerativeNetRequest", "tabs", "notifications", "http://*/*", "https://*/*"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
}
}

然后我从ChatGPT得到以下代码:

// The URLs of the entertaining websites to track
const ENTERTAINMENT_URLS = [
"https://www.youtube.com",
"https://www.netflix.com",
"https://tv.nrk.no/",
"https://www.discoveryplus.com/no/",
"https://www.disneyplus.com/",
"https://www.hbo.com/",
"https://www.hbo.no/",   
];

// The current session start time
let sessionStartTime = null;
// The total time spent on entertaining websites in the current session
let sessionTimeSpent = 0;
// The interval ID for the time checker
let checkIntervalID = null;
// The time limit for the current session, in minutes
let sessionTimeLimit = null;
// Check the time spent on entertaining websites and update the UI
function checkTime() {
// Calculate the time spent in the current session
const timeElapsed = Date.now() - sessionStartTime;
sessionTimeSpent += timeElapsed;
// Update the UI with the time spent in the current session
updateUI(sessionTimeSpent);
// Check if the time limit has been reached
if (sessionTimeSpent >= sessionTimeLimit * 60 * 1000) {
// Stop the time checker
clearInterval(checkIntervalID);
// Show an alert to the user that the time limit has been reached
alert(`You have reached the time limit of ${sessionTimeLimit} minutes for this session.`);

// Change the site to show clouds and a 404 error
switch (window.location.hostname) {
case "www.youtube.com":
document.head.innerHTML = generateSTYLES();    
document.body.innerHTML = generateHTML("YOUTUBE");
}
// Reset the session start time, time spent, and time limit
sessionStartTime = null;
sessionTimeSpent = 0;
sessionTimeLimit = null;
}
}
// Initialize the time tracker
function initialize() {
// Get the current tab
browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
const currentTab = tabs[0];
// Check if the current tab is an entertaining website to track
if (isTrackedWebsite(currentTab.url)) {
// Show the popup
showPopup();
// Set the session start time
sessionStartTime = Date.now();
// Start the time checker
checkIntervalID = setInterval(checkTime, 60  * 1000);
// Show the time limit setting form
showSettingForm();
}
});
}
// Check if the given URL is an entertaining website to track
function isTrackedWebsite(url) {
return ENTERTAINMENT_URLS.some((trackedUrl) => url.startsWith(trackedUrl));
}
// Show the popup
function showPopup() {
// Create the popup HTML
const popupHtml = `
<form>
<label>Enter an integer: <input type="number" name="integer" min="1" max="100" required /></label>
<input type="submit" value="Submit" />
</form>
`;
// Show the popup
browser.windows.create({
type: "popup",
url: "data:text/html;charset=utf-8," + encodeURI(popupHtml),
});
}
// Show the time limit setting form
function showSettingForm() {
// Get the time limit setting form
const form = document.getElementById("setting-form");
// Show the form
form.style.display = "block";
// Add an event listener for the submit event on the form
form.addEventListener("submit", (event) => {
// Prevent the form from submitting and reloading the page
event.preventDefault();
// TODO: Handle the form submission here
});
}
initialize();

显然，它缺少一些基本的功能。例如，updateUI"函数未实现。我也有两个函数(" generatstyles "和"generateHTML")，为被"阻止"的网站创建一个加载屏幕。

我对脚本的主要问题:

1. 不强制用户在访问娱乐网站时输出时间限制。
2. "cooldown"
3. 如何处理表单提交-参见脚本的最后一部分

所以，我希望在改进脚本和回答/帮助上面的问题一般帮助。此外，我应该做一个单独的html文件或包括在js文件?

Answer 1

你错过了web扩展的工作方式。

Web扩展由3个主要上下文组成:

<

1. 背景脚本/gh>
2. 弹出
<
3. 内容脚本/gh>

当你点击浏览器工具栏中的扩展图标时，你会看到这个弹出窗口。

后台脚本作为你的扩展的后台API。

内容脚本是一种注入目标页面的JS脚本。这才是你真正需要的。

首先，您应该为3个上下文创建1个单独的脚本。另外，在你的舱单上。Json你应该定义在哪些页面/娱乐网站你想注入你的内容脚本。下面是一个例子:

"content_scripts": [
{
"matches": [ "http://siebelgcs.invensys.com/serviceoui_enu/*" ],
"run_at": "document_end",
"js": [
"lib/require.js",
"lib/require-cs.js",
"lib/require-cfg.js",
"app/main.js"
],
"css": [
"css/content.css",
"css/controls.css",
"css/activityInStatus.css"
]
}
],

内容脚本应该能够阻止该网站。例如，您可以在页面上添加一个新的div，当用户在弹出窗口中输入时间时，该div就会消失。你的内容脚本和你的弹出窗口之间的通信，你应该使用运行时消息API:https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage

我会阅读关于这个主题的Mozilla文档，他们那里有很好的信息。