New to extensions development here. I’m trying to build a simple extension where if the user highlights some text on the webpage and clicks on the defined context menu option then an alert message message is displayed. However, when the context menu option is clicked nothing happens. Not sure where I’m going wrong. Please help. Thanks!
Here is my code:
hello.js `
JavaScript
x
15
15
1
chrome.contextMenus.create(2
{3
id: "foo",4
"title": "click",5
"contexts": ["selection"]6
}7
);8
9
chrome.contextMenus.onClicked.addListener(10
(info, tab) => {11
alert("Hello");12
console.log("Hello");13
}14
);15
manifest.json `
JavaScript
1
16
16
1
{2
"manifest_version": 3,3
"name": "bar",4
"description": "Base Level Extension",5
"version": "1.0",6
7
"background": { 8
"service_worker": "hello.js"9
},10
11
"permissions": [12
"contextMenus"13
]14
15
}16
Advertisement
Answer
I rewrote your program. I hope this works as you expected. Read the program comments carefully.
hello.js
JavaScript
1
24
24
1
chrome.runtime.onInstalled.addListener(() => {2
// If you call it directly, restarting Chrome will result in the following error.3
// Unchecked runtime.lastError: Cannot create item with duplicate id foo4
chrome.contextMenus.create({5
id: "foo",6
"title": "click",7
"contexts": ["selection"]8
});9
});10
11
chrome.contextMenus.onClicked.addListener((info, tab) => {12
// Service worker cannot access the DOM, so alert() isn't available.13
// alert("Hello");14
chrome.windows.create({15
width: 350,16
height: 250,17
top: 200,18
left: 400,19
type: "popup",20
url: "alert.html"21
});22
console.log("Hello");23
});24
alert.html
JavaScript
1
14
14
1
<!DOCTYPE html>2
<html>3
<style type="text/css">4
* {5
font-size: xx-large;6
}7
</style>8
9
<body>10
Hello11
</body>12
13
</html>14