1

I am trying to create an chrome extension where I am creating an widget which will load on any desired webpage after 5sec. Things are working fine. But it is appearing inside the popup. I don't want to display the widget in side the popup. I want to display it at the bottom of the page. The Mainifest.json file is below:

{
   "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!" );
});

Help will be appreciated.

Preety Singh
  • 221
  • 3
  • 18
  • Try removing `"html": ["popup.html"]`. If you require external html files you can declare them as: `"web_accessible_resources": ["popup.htm"]` (but **not** inside `"content_scripts":` tho) – Luka Čelebić Oct 09 '17 at 08:52
  • @PredatorIWD Hi, nothing happened, the content is still rendering inside the popup... – Preety Singh Oct 09 '17 at 09:49
  • This is a very trivial problem, can you add any code from the popup that is relevant to this? Or the whole `popup.js`. – Luka Čelebić Oct 09 '17 at 11:20
  • I have done a hack. I am appending the content on body. Working fine now. But the problem is I want to show the widget onClick of the icon and it is not working. I update the code. In The js file what happens is it only shows the alert and doesn't show any content not even console.log onClick of icon. – Preety Singh Oct 09 '17 at 11:52
  • I suggest you read the [Chrome extension overview](https://developer.chrome.com/extensions/overview) (perhaps along with the pages linked from the overview). The [architecture section](https://developer.chrome.com/extensions/overview#arch) has overall architecture information which should help your understanding of how things are generally organized/done. You should also read [Content Scripts](https://developer.chrome.com/extensions/content_scripts). – Makyen Oct 09 '17 at 23:35
  • What *exactly* is shown in the [various appropriate consoles for your extension](https://stackoverflow.com/a/38920982/3773011) when you load and execute your extension? – Makyen Oct 09 '17 at 23:37
  • Please [edit] the question to be on-topic: include a [mcve] that *duplicates the problem*. For Chrome extensions or Firefox WebExtensions you almost always need to include your *manifest.json* and some of the background, content, and/or popup scripts/HTML, and often webpage HTML/scripts. Questions seeking debugging help ("why isn't my code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it *in the question itself*. Please also see: [What topics can I ask about here?](/help/on-topic), and [ask]. – Makyen Oct 09 '17 at 23:38
  • The code you have in the question is incomplete/does not function/has syntax errors. Please include actual code which duplicates the problem: a [mcve]. – Makyen Oct 09 '17 at 23:40
  • *Please* don't load jQuery into **every** page (`content_scripts` with your `matches`) unless you **need** to. jQuery is 85kiB of minimized code. This is a significant burden with which to saddle *every single page*. What of those of us who have 100's of tabs open? While it's possible you really *need* to load jQuery, it's more likely that you are doing so for the convenience of saving a couple/few hundred characters in your own code by not using vanilla JavaScript. If that's the case (we have no way to know), doing so is a *very* poor trade-off from your user's point of view. – Makyen Oct 09 '17 at 23:46
  • Don't load libraries by adding them as ` – Makyen Oct 09 '17 at 23:49

0 Answers0