[英]page_action click does not work while browser_action click works in Chrome Extension?
I want to make a simple browser extension like Font Face Ninja which toggles UI when page_action
or browser_action
is clicked.我想做一个简单的浏览器扩展,比如Font Face Ninja ,它在单击page_action
或browser_action
时切换 UI。
The following code using browser_action
works -使用browser_action
的以下代码有效 -
chrome.browserAction.onClicked.addListener(function(tab) {
console.log(`clicked browserAction`)
})
{
...
"browser_action": {
"default_icon": {
"19": "icon19.png",
"38": "icon38.png"
}
},
...
}
While the following code using page_action
does not work -虽然以下使用page_action
代码不起作用 -
chrome.pageAction.onClicked.addListener(function(tab) {
console.log(`clicked pageAction`)
})
{
...
"page_action": {
"default_icon": {
"19": "icon19.png",
"38": "icon38.png"
}
},
...
}
According to MDN docs ,根据MDN 文档,
Page actions are like browser actions, except that they are associated with particular web pages rather than with the browser as a whole.页面操作类似于浏览器操作,不同之处在于它们与特定网页相关联,而不是与整个浏览器相关联。 If an action is only relevant on certain pages, then you should use a page action and display it only on relevant pages.如果一个动作只在某些页面上相关,那么你应该使用一个页面动作并只在相关页面上显示它。 If an action is relevant to all pages or to the browser itself, use a browser action.如果操作与所有页面或浏览器本身相关,请使用浏览器操作。
Which confirms I want to use page_action
but its not working.这确认我想使用page_action
但它不起作用。
How do I make it work using page_action
?如何使用page_action
使其工作?
A way to make page_action
work can be found on my Github → https://github.com/deadcoder0904/insert-remove-ui-chrome-extension/tree/page_action可以在我的 Github 上找到使page_action
起作用的方法 → https://github.com/deadcoder0904/insert-remove-ui-chrome-extension/tree/page_action
var hasExecutedOnce = false
function addUI(tabId) {
chrome.tabs.sendMessage(tabId, {
from: 'background',
subject: 'isUIAdded?',
})
}
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostEquals: 'www.google.co.in' },
}),
],
actions: [new chrome.declarativeContent.ShowPageAction()],
},
])
})
})
chrome.pageAction.onClicked.addListener(function(tab) {
if (!hasExecutedOnce) {
chrome.tabs.executeScript(
tab.id,
{
file: 'contentScript.js',
},
function() {
addUI(tab.id)
},
)
hasExecutedOnce = true
}
addUI(tab.id)
})
var body = document.getElementsByTagName('body')[0]
function insertUI() {
var div = document.createElement('div')
div.setAttribute('id', 'sample-extension-12345')
div.innerHTML = `<h1>Sample Extension</h1>`
body.appendChild(div)
}
function removeUI() {
document.getElementById('sample-extension-12345').remove()
}
function main() {
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.subject === 'isUIAdded?') {
const id = document.getElementById('sample-extension-12345')
if (id === null) insertUI()
else removeUI()
}
})
}
main()
It also has a solution for browser_action
on the master branch → https://github.com/deadcoder0904/insert-remove-ui-chrome-extension/它也有主分支上的browser_action
解决方案 → https://github.com/deadcoder0904/insert-remove-ui-chrome-extension/
var hasExecutedOnce = false
function addUI(tabId) {
chrome.tabs.sendMessage(tabId, {
from: 'background',
subject: 'isUIAdded?',
})
}
chrome.browserAction.onClicked.addListener(function(tab) {
if (!hasExecutedOnce) {
chrome.tabs.executeScript(
tab.id,
{
file: 'contentScript.js',
},
function() {
addUI(tab.id)
},
)
hasExecutedOnce = true
}
addUI(tab.id)
})
var body = document.getElementsByTagName('body')[0]
function insertUI() {
var div = document.createElement('div')
div.setAttribute('id', 'sample-extension-12345')
div.innerHTML = `<h1>Sample Extension</h1>`
body.appendChild(div)
}
function removeUI() {
document.getElementById('sample-extension-12345').remove()
}
function main() {
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.subject === 'isUIAdded?') {
const id = document.getElementById('sample-extension-12345')
if (id === null) insertUI()
else removeUI()
}
})
}
main()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.