I have already written code for the manifest, html, and javascript for my code. In basic, the extension is meant to show a fortune from my array written in my javascript. Basically you click the extension and it randomly chooses a phrase. For some reason my code is unable to pick a phrase and I don't know why, any help?
**after implementing the code below that you have generously provided, I am getting an error code in the chrome extension as follows:
Uncaught DOMException: Blocked a frame with origin "https://ogs.google.com" from accessing a cross-origin frame. at i.requestFrameworkInitializer (chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/onloadwff.js:71:780730) at Object.initialize (chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/onloadwff.js:71:778514) at Object.sendRequest (chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/onloadwff.js:71:778654) at Object.requestFunction (chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/onloadwff.js:71:804161) at Object.getLinkedAccount (chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/onloadwff.js:71:748593) at HTMLDocument. (chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/onloadwff.js:71:803471)
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
/* Add some basic styling to the extension's UI */
body {
font-family: sans-serif;
text-align: center;
}
h1 {
font-size: 18px;
margin-bottom: 10px;
}
p {
font-size: 14px;
}
</style>
<script src = "js/popup.js"></script>
</head>
<body>
<h1>Fortune of the Day</h1>
<p id="fortune"></p>
</body>
</html>JAVASCRIPT:
console.log("Displaying fortune list...");
// Define an array of fortunes
const fortunes = [
"You will have a great day today.",
"Expect good news soon.",
"You will meet a new friend today.",
"Your hard work will pay off soon.",
"A small change will bring big results."
];
// Generate a random fortune
function getFortune() {
return fortunes[Math.floor(Math.random() * fortunes.length)];
}
// Save the current fortune to the extension's storage
function saveFortune(fortune) {
chrome.storage.local.set({ fortune: fortune });
}
// Retrieve the current fortune from the extension's storage
function getSavedFortune(callback) {
chrome.storage.local.get("fortune", callback);
}
// Display the current fortune in the extension's UI
function displayFortune(fortune) {
const fortuneElement = document.getElementById("fortune");
fortuneElement.innerText = fortune;
}
// Initialize the extension by retrieving the current fortune from the extension's storage
getSavedFortune(function(items) {
let fortune = items.fortune;
if (!fortune) {
// If no fortune is saved, generate a new one and save it
fortune = getFortune();
saveFortune(fortune);
}
displayFortune(fortune);
});
// Listen for the extension to be activated and refresh the fortune
chrome.runtime.onStartup.addListener(function() {
const fortune = getFortune();
saveFortune(fortune);
displayFortune(fortune);
});MANIFEST:
{
"manifest_version": 3,
"name": "Fortune of the Day",
"version": "1.0",
"description": "Displays a different fortune every day",
"permissions": [
"storage",
"activeTab"
],
"background": {
"script": ["js/popup.js"]
},
"action": {
"default_popup": "html/popup.html"
}
}
1条答案
按热度按时间mwg9r5ms1#
看起来
storage.local.set和storage.local.get是基于承诺的方法（参见chrome扩展API文档中的用法示例）。您需要在JavaScript代码中处理此问题。此解决方案应该有效：此外，在
popup.html文件中，将<script>元素更改为以下内容：你之前的脚本标记指向了一个不存在的测试目录。另外，因为你的
<script>元素在HTML文件的<head>元素中，并且在解释时执行DOM操作，所以你必须使用defer属性延迟脚本的执行。希望这个有用。