我想知道是否可以允许用户将图像上传到扩展并将该图像显示为背景图像。
- 使用
<input type="file">让用户选择一个文件 - 将文件转换为数据URL
- 使用chrome.storage.local.set保存数据URL
- 使用内容脚本替换网页中的背景图像
潜在问题：https://developer.chrome.com/docs/extensions/mv3/declare_permissions/#unlimitedStorage
注意：此权限仅适用于Web SQL数据库和应用程序缓存(请参阅第58985期(。此外，它目前不适用于通配符子域，如http://*.example.com.
概念证明：https://github.com/GrippenDynamik/Set_Background_Image
manifest.json
{
"manifest_version": 3,
"name": "Set Background Image",
"version": "1.0",
"action": {
"default_title": "Set Background Image"
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["/js/content_script.js"]
}
],
"permissions": [
"storage"
]
}
background.js
async function action_onClicked(tab, onClickData) {
chrome.tabs.create({
active: true,
url: chrome.runtime.getURL("/html/file_picker.html"),
});
}
chrome.action.onClicked.addListener(action_onClicked);
/html/file_picker.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<label for="file_picker">Choose an image to upload</label><br>
<input type="file" id="file_picker" accept="image/*"><br>
<br>
<button type="button" id="button_clear">Clear background image</button>
<br>
<img id="image"><br>
<script type="application/javascript" src="/js/file_picker.js"></script>
</body>
</html>
/js/file_picker.js
function storage_onChanged(changes, areaName) {
let settings = {};
if (areaName == "local") {
if (changes.image_data_url) {
settings.image_data_url = changes.image_data_url.newValue ?? "";
}
if (changes.image_filename) {
settings.image_filename = changes.image_filename.newValue ?? "none";
}
}
set_image(settings);
}
function set_image(settings) {
let image = document.getElementById("image");
if (settings.image_data_url !== undefined) { image.src = settings.image_data_url; }
if (settings.image_filename !== undefined) { image.alt = settings.image_filename; }
}
function remove_image() {
chrome.storage.local.remove(["image_data_url", "image_filename"]);
}
function store_image() {
if (this.files.length > 0) {
const reader = new FileReader();
reader.addEventListener("load", () => {
chrome.storage.local.set({"image_data_url": reader.result, "image_filename": this.files[0].name});
});
reader.readAsDataURL(this.files[0]);
}
}
// Initialization
chrome.storage.local.get(["image_data_url", "image_filename"])
.then(items => {
set_image({image_data_url: items.image_data_url ?? "", image_filename: items.image_filename ?? "none"});
}
);
document.getElementById("file_picker").addEventListener("change", store_image);
document.getElementById("button_clear").addEventListener("click", remove_image);
chrome.storage.onChanged.addListener(storage_onChanged);
/js/content_script.js
function storage_onChanged(changes, areaName) {
if (areaName == "local" && changes.image_data_url) {
set_background_image(changes.image_data_url.newValue, true);
}
}
function set_background_image(data_url, changed) {
if (data_url) {
// https://www.w3schools.com/jsref/prop_style_backgroundimage.asp
document.body.style.backgroundImage = "url('" + data_url + "')";
}
else if (changed) {
document.body.style.backgroundImage = "initial";
}
else {
console.log("You haven't 'uploaded' an image yet. Please click the extension action.");
}
}
// Initialization
chrome.storage.local.get("image_data_url")
.then(items => set_background_image(items.image_data_url, false));
chrome.storage.onChanged.addListener(storage_onChanged);