chrome 확장 중, content - script 과 background. js 간 의 통신

10833 단어 JavaScript
background.js 에 게 메시지 보 내기 content-script
  • background.js 보 내기
  • // bg---->content
    chrome.tabs.query({
      active: true,
      currentWindow: true
    }, (tabs) => {
      let message = {
        //          content-script   
        info: window.localStorage.getItem('isShow')
      }
      chrome.tabs.sendMessage(tabs[0].id, message, res => {
        console.log('bg=>content')
        console.log(res)
      })
    })
    
  • content-script 수신
  • // get popup2content info
    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
        console.log(request.info)
        //       bg   
        sendResponse('get the message')
    })
    
    content-script 에 게 메시지 보 내기 background.js
  • content-script 보 내기
  • Chrome 에서 제공 하 는 대부분의 API 는 content 에서 지원 되 지 않 습 니 다.scripts 에서 sendmessage onMessage 를 실행 하면 사용 할 수 있 습 니 다.
    chrome.runtime.sendMessage({
      info: isShow
    }, res => {
      //   
      // alert(res)
    })
    
  • background.js 수신
  • chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
      const res = req.info
      console.log(res)
    })
    

    보충 하 다
  • background 에 게 popup 메시지 보 내기
  • // background.js 
    function toPopup () {
      alert('to popup')
    }
    
    // popup.js 
    const bg = chrome.extension.getBackgroundPage()
    document.getElementById('btn').onclick = function () {
      bg.toPopup()
    }
    
    popup.html 
    
    
    
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Documenttitle>
      head>
      <body>
        <button id="btn">clickbutton>
    
        <script src="./popup.js">script>
      body>
    html>
    

    좋은 웹페이지 즐겨찾기