// popup.js

document.querySelector('#btn').addEventListener('click', (e) => {
    console.log(e)
    var bg = chrome.extension.getBackgroundPage();
    bg.test(); // 访问bg的函数  意味着这里能够直接调用background.js
    sendMessageToContentScript({
        cmd: 'test',
        value: 'hello'
    }, function (response) {
        console.log('来自content的回复：' + response);
    });
})
function sendMessageToContentScript(message, callback) {
    chrome.tabs.query({
        active: true,
        currentWindow: true
    }, function (tabs) {
        chrome.tabs.sendMessage(tabs[0].id, message, function (response) {
            if (callback) callback(response);
        });
    });
}

// content.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  // console.log(sender.tab ?"from a content script:" + sender.tab.url :"from the extension");
  if (request.cmd == 'test') {
    console.log(document.querySelector("#su"))
    console.log(request.value)
    // 这里是 content.js 跟 background.js 通信
    chrome.runtime.sendMessage({greeting: '你好，我是content-script呀，我主动发消息给后台！'}, function(response) {
      console.log('收到来自后台的回复：' + response);
    });
  }
  sendResponse('我收到了你的消息！');
});

// content.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  // console.log(sender.tab ?"from a content script:" + sender.tab.url :"from the extension");
  if (request.cmd == 'test') {
    console.log(document.querySelector("#su"))
    console.log(request.value)
    // 这里是 content.js 跟 background.js 通信
    chrome.runtime.sendMessage({greeting: '你好，我是content-script呀，我主动发消息给后台！'}, function(response) {
      console.log('收到来自后台的回复：' + response);
    });
  }
  sendResponse('我收到了你的消息！');
});

// background.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    console.log('收到来自content-script的消息：');
    console.log(request, sender, sendResponse);
    sendResponse('我是后台，我已收到你的消息：' + JSON.stringify(request));
});