Javascript 页面\操作单击不起作用，而浏览器\操作单击在Chrome扩展中起作用？

我想做一个简单的浏览器扩展，比如单击

page\u action

或

browser\u action

时切换UI

以下代码使用

browser\u操作

工作-

background.js manifest.json 而使用

page\u action

的以下代码不起作用-

background.js manifest.json 根据,

页面操作与浏览器操作类似，只是它们与特定网页相关联，而不是与整个浏览器相关联。如果某个操作仅与某些页面相关，则应使用页面操作并仅在相关页面上显示。如果操作与所有页面或浏览器本身相关，请使用浏览器操作

这确认了我想使用

页面操作

，但它不起作用

如何使用

page\u action

？

page action使其工作 在我的Github上可以找到一种使

页面操作

有效的方法→

background.js

var hasExecuteOnce=false
函数addUI（tabId）{
chrome.tabs.sendMessage（tabId{
来自：“背景”，
主题：“是否已添加？”，
})
}
chrome.runtime.onInstalled.addListener（函数（）{
chrome.declarativeContent.onPageChanged.removeRules（未定义，函数（）{
chrome.declarativeContent.onPageChanged.addRules([
{
条件：[
新chrome.declarativeContent.PageStateMatcher({
pageUrl:{hostEquals:'www.google.co.in'}，
}),
],
操作：[新建chrome.declarativeContent.ShowPageAction（）]，
},
])
})
})
chrome.pageAction.onClicked.addListener（函数（选项卡）{
如果（！hasExecutedOnce）{
chrome.tabs.executeScript(
选项卡id，
{
文件：“contentScript.js”，
},
函数（）{
addUI（选项卡id）
},
)
hasExecuteOnce=true
}
addUI（选项卡id）
})

contentScript.js

var body=document.getElementsByTagName（'body'）[0]
函数insertUI（）{
var div=document.createElement（'div'）
div.setAttribute（'id'，'sample-extension-12345'）
div.innerHTML=`示例扩展名`
正文.附属儿童（分部）
}
函数removeUI（）{
document.getElementById（'sample-extension-12345'）。remove（）
}
函数main（）{
chrome.runtime.onMessage.addListener（函数（请求、发送方、发送响应）{
如果（request.subject==='isUIAdded？'）{
const id=document.getElementById（'sample-extension-12345'）
if（id==null）insertUI（）
else removeUI（）
}
})
}
main（）

浏览器操作 它还为主分支上的

browser\u action

提供了一个解决方案→

background.js

var hasExecuteOnce=false
函数addUI（tabId）{
chrome.tabs.sendMessage（tabId{
来自：“背景”，
主题：“是否已添加？”，
})
}
chrome.browserAction.onClicked.addListener（函数（选项卡）{
如果（！hasExecutedOnce）{
chrome.tabs.executeScript(
选项卡id，
{
文件：“contentScript.js”，
},
函数（）{
addUI（选项卡id）
},
)
hasExecuteOnce=true
}
addUI（选项卡id）
})

contentScript.js

var body=document.getElementsByTagName（'body'）[0]
函数insertUI（）{
var div=document.createElement（'div'）
div.setAttribute（'id'，'sample-extension-12345'）
div.innerHTML=`示例扩展名`
正文.附属儿童（分部）
}
函数removeUI（）{
document.getElementById（'sample-extension-12345'）。remove（）
}
函数main（）{
chrome.runtime.onMessage.addListener（函数（请求、发送方、发送响应）{
如果（request.subject==='isUIAdded？'）{
const id=document.getElementById（'sample-extension-12345'）
if（id==null）insertUI（）
else removeUI（）
}
})
}
main（）

page\u默认情况下禁用该操作，您需要使用show（）方法在相应的选项卡上单独启用它，请参阅包含演示扩展链接的。你也可以使用。我试图让它工作使用演示链接，但它给出了奇怪的错误，所以我退出。如果需要的话，我会再谈这个问题。目前，

browser\u action

正在运行，所以现在还可以使用

declarativeContent

→ @wOxxOm页面上的文档确实令人困惑；并且没有说任何关于

需要显式启用它的内容。首先，你的评论总是很有帮助的：拇指：拯救我的一天，兄弟！花了3个小时想弄明白。。。要是你能在这里插入代码就好了。@Avalanch1刚刚读了&&you's golden:）要是我有眼睛和监视器就好了…@Avalanch1完成了。我把它们放在h1和h2。第一个是页面操作，第二个是浏览器操作，但我认为manifest v3的API会在年底发生变化，我们只有一个API，但现在你可以开始了。让我知道这对你是否有效：）现在我可以看了。你真是个了不起的家伙！
chrome.browserAction.onClicked.addListener(function(tab) {
  console.log(`clicked browserAction`)
})

{
    ...
    "browser_action": {
    "default_icon": {
      "19": "icon19.png",
      "38": "icon38.png"
    }
  },
    ...
}

chrome.pageAction.onClicked.addListener(function(tab) {
  console.log(`clicked pageAction`)
})

{
    ...
    "page_action": {
    "default_icon": {
      "19": "icon19.png",
      "38": "icon38.png"
    }
  },
    ...
}