0

I'm building a chrome extension and would like to style the body up, here is a simple screenshot.

enter image description here

I want to remove the triangle above the extension and reposition it further down, how can I do that? I inspected the element, but I can't find that triangle, i thought maybe it's a css thing. Also I want to remove that shadow on the extension's sides.

I've seen other chrome extensions with different designs (without the triangle, some have round corners in the body), and I would like to implement my design.

Has anybody had experience styling custom chrome extensions and positioning? Your help will be appreciated, thanks!

UPDATE

here is the code

manifest file:

{
 "name": "chrome-ext-test",
 "description": "testing testing",
 "version": "0.1",
 "browser_action" : {
  "default_popup": "popup.html",
  "default_icon": "defaultIcon19x19.png"
 },
"manifest_version": 2,
"permissions": ["notifications"]
}

(don't know where to add the manifest in the snippet, but this controls the ext)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- <title></title> -->
    <script type="text/javascript">
      function clickHandler() {
        window.webkitNotifications.createNotification("icon.gif", "Clicked", "it was clicked").show();
      }
    </script>
  </head>
  <body>
    I see this when launched from the toolbar icon :)

    <input type="button" value="Clicky" onclick="clickHandler()">
  </body>
</html>
medev21
  • 2,469
  • 8
  • 31
  • 43
  • Is the image from your extension? Post the code here, edit your question and hit CTRL + M and put your code in the box that opens – mlegg Jan 05 '17 at 20:59
  • @mlegg I added the code, there isn't much, and don't know where to add the manifest json file in the snippet. – medev21 Jan 05 '17 at 21:06
  • 1
    Can you add a screenshot of an extension that has moved the position of this box or removed the triangle. As far as I knew, this wasn't possible. – Loaf Jan 05 '17 at 22:00
  • While code [snippets](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) are convenient for JavaScript/HTML/CSS code which can be executed in an iframe, they are generally not appropriate when that is not the case. – Makyen Jan 05 '17 at 22:00
  • Yes, please provide a link to an extension that modifies this styling. In general, if you see something like this that does what you want, you should look at the source code which accomplishes it to figure out how it does it. – Makyen Jan 05 '17 at 22:02
  • I am thinking that what they do is instead inject code on what ever page you are on when you click on the icon. That allows them to have a different window that they can position differently and not have a triangle at the top, all the while making the user think it was the popup.html file. – Loaf Jan 05 '17 at 22:05
  • moat(https://chrome.google.com/webstore/detail/moat-extension/eejdpcjcnjbndalmijmikijcjiehfgkd?hl=en) is an extension that has its own style and can be dragged around. @Loaf , i agree, it appears the code is injected into the host page. If you inspect the element, you'll see the ext. html structure as part of the host html. Question is how do you 'inject' the code into the host page? – medev21 Jan 05 '17 at 22:12
  • You just use javascript to append a html string to the body. Make a div's position fixed to the upper right window. – Loaf Jan 05 '17 at 22:16

1 Answers1

1

There are some limitations on what you can edit on the popup window itself. You can't remove that triangle or change the shadowing. The width and be increase, but I believe only to a max of 800 px and a height of 600px.

What it looks like moat is doing is injecting a HTML string into the webpage itself.

Take a look at this page and it has a good example on how to do this. Your popup.html will just execute a script on the selected tab when it opens then close itself.

Community
  • 1
  • 1
Loaf
  • 3,011
  • 2
  • 15
  • 25