你必須了解 chrome 插件開發才能閱讀以下內容。
傳送門: https://qa.1r1g.com/sf/ask/440544891/
原理:頁面 js 向 chrome 插件的 background.js 傳送消息並且獲取反饋。
這需要使用到 background.js,需要配置一下:
"background":
{
"scripts": ["background.js"]
},
"externally_connectable":
{
"matches": ["*://localhost/*", "*://your.domain.com/*"]
},
值得一提的是: externally_connectable 必須是二級域名,
說白了你必須用服務器來測試這個功能。
background.js
chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {
if (request) {
if (request.message) {
if (request.message == "version") {
sendResponse({ version: 1.0 })
}
}
}
return true
})
http://localhst:80/index.html 測試消息傳遞:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>檢查用戶是否安裝了Chrome擴展程序</title>
</head>
<body>
<div id="app"></div>
</body>
<script> // chrome extensions id const id = 'jckdhikejenepdegalgokjacoeamoibk1' // 需要版本 const requiredVersion = 1.0 // 是否安裝了擴展? let hasExtension = false // 擴展是否為最新版本? let isLastVersion = false try { // 向 backgrond.js 發送消息 chrome.runtime.sendMessage(id, { message: "version" }, function(reply) { if (reply && reply.version >= requiredVersion) { console.log('ok') } else { console.warn('update') } }) } catch (err) { if (err.message.includes('Invalid extension id')) { console.warn('未檢測到插件存在!') } } </script>
</html>