chrome插件

[dcharlie123]

基础

manifest配置

通信

• popup/background to content

// popup.js
btn1.addEventListener("click",async (event)=>{
  let [tab] = await chrome.tabs.query({active:true,currentWindow:true})
  chrome.tabs.sendMessage(tab.id,{
    action:'click' , 
    payload:'i come form popop'
  })
})

// content.js
chrome.runtime.onMessage.addListener((request,sender,sendResponse)=>{
  const {action,payload} = request;
  console.log(request);
  sendResponse("content got")
})

• content to popup/background

// content.js
const btn = document.createElement("button")
btn.innerText="send"
btn.addEventListener("click",()=>{
  chrome.runtime.sendMessage({
    action:"toPopup",
    payload:"i come from content"
  })
})
document.body.appendChild(btn)

// popup.js
chrome.runtime.onMessage.addListener((request,sender,sendResponse)=>{
  const {action,payload} = request;
  console.log(request);
  sendResponse("popup got")
})

// background.js
chrome.runtime.onMessage.addListener((request,sender,sendResponse)=>{
  const {action,payload} = request;
  console.log(request);
  sendResponse("background got")
})

调试

• popup
  在popup弹窗右键，点击“检查”调出

• background
  在chrome拓展程序列表点击“背景页”调出
  

• content_scripts
  直接在页面右键，点击“检查”调出

https://juejin.cn/column/7204445469099098167
https://juejin.cn/post/7035782439590952968
https://juejin.cn/post/7265614572118409251