加载页面后，相机扩展名不起作用

Question

我有chrome扩展程序，单击扩展程序图标时会打开相机。我的代码运行良好，但是当我重新加载页面时，我的相机消失了。我也想在页面重新加载后显示相机。我尝试使用Localstorage，但是当我添加代码时，它不起作用。有人可以帮我吗？

这是我的代码 content.js

chrome.runtime.onMessage.addListener(
    function({ShowCamera}, sender, sendResponse) {
        if(ShowCamera){

            let html = `
            <div class = "video-container">        
              <video style="width: 240px; margin: 0px;" autoplay="true" id="videoElement"></div>
            </div>`

            function setupCam() {
                 navigator.mediaDevices.getUserMedia({
                   video: true
                }).then(mediaStream => {
                    document.querySelector('#videoElement').srcObject = mediaStream;
                }).catch((error) => {
                  console.warn(error);
                });
              }

              setupCam();
              document.body.innerHTML += html;


            }
});

background.js

chrome.browserAction.onClicked.addListener(function(){
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {ShowCamera: "true"});



  });
})