在Chrome扩展程序中显示网页上的内容而非弹出窗口

Question

我正在尝试创建一个chrome扩展程序，我正在创建一个小部件，它将在5秒后加载到任何所需的网页上。事情很好。但它出现在弹出窗口内。我不想在弹出窗口中显示小部件。我想在页面底部显示它。 Mainifest.json 文件如下：

{
   "manifest_version": 2,

   "name": "In Offer Plugin",
   "description": "This extension will show the discount offer",
   "version": "1.0",

   "browser_action": {
      "default_icon": "tag.png"
   },
   "content_scripts": [
      {
         "matches": ["http://*/*"],
         "js": ["jquery.js", "popup.js"],
         "css": ["popup.css"]
   }
   ],
   "permissions": [
      "activeTab",
      "clipboardWrite"
   ]
}

JS FILE

var imported = document.createElement('script');
imported.src = 'jquery.js';
document.head.appendChild(imported);


chrome.browserAction.onClicked.addListener(function(tab) {

  alert('working?');
  $(`<div style="width: 100%;display: inline-flex;justify-content: space-between;z-index: 999; ">
     <div style="position: fixed;min-width: 250px;color: #616161;background: #f1f1f1;border-radius: 100px;padding: 20px 20px 10px;box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);bottom: 30px;left: 40px;z-index: 999;justify-content: space-between;" id="bookingInfo">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

 alert( "ready!" );
});

帮助将不胜感激。