I learned to create a chrome extension. I tried hi world example and it worked fine. Now I'm trying to add custom code and make some changes to the hello world code according to my requirements.
What I'm trying to create is when the user clicks on the icon in the address bar, he should open popup.html below the address bar , as shown in the figure. A screenshot is an extension called raindrop.io
They do this inside the chrome extension. When I click on the icon, it opens the right box on top of the existing web page and under the address bar to show all my saved bookmarks. I wanted to achieve the same effect, but I do not know where to start. I heard that there is an experimental sidebar, but Google has removed it.
EDIT
I accepted the proposals and tried to implement this. Now I'm stuck in two places -
- How to open a window by clicking on the icon in the address bar. Right now, it just opens automatically by itself. I want it to be open when the user clicks on the icon.
- I do all this to create a note with an extension, and I did create notes, but it works in a pop-up interface, but I wanted to implement it in the sidebar interface.
Here is my code for -
a. Side extension interface in Chrome extension
manifest.json
{ "manifest_version": 2, "name": "Hello World", "description": "This extension to test html injection", "version": "1.0", "content_scripts": [{ "run_at": "document_end", "matches": [ "https://*/*", "http://*/*" ], "js": ["js/jquery-1.11.3.js", "js/content-script.js"], "css": ["css/custom.css"] }], "browser_action": { "default_icon": "icon.png" }, "permissions": [ "activeTab", "https://ajax.googleapis.com/" ] }
Script.js Content
var iframe = document.createElement('iframe'); iframe.style.background = "green"; iframe.style.height = "100%"; iframe.style.width = "360px"; iframe.style.position = "fixed"; iframe.style.top = "0px"; iframe.style.right = "0px"; iframe.style.zIndex = "9000000000000000000"; iframe.frameBorder = "none"; document.body.appendChild(iframe);
B. Note. Accept Application Extension
popup.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>SideNotes</title> <link rel="stylesheet" href="css/style.css"> <script src="popup.js"></script> </head> <body> <div class="container"> <div id="toolbar"> <p id="title">SIDENOTES </p> <img id="logo" src="image/icon.png" alt=""> </div> <div id="all-notes"> <ul id="todo-items"></ul> </div> <div id="take-note"> <form id="new-todo-form" method="POST" action="#"> <textarea id="new-todo"></textarea> <input type="image" src="image/done.svg" id="submitButton"> </form> </div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/custom.js"></script> <script type="text/javascript" src="js/db.js"></script> <script type="text/javascript" src="js/app.js"></script> </body> </html>
Screenshot of my application, it works locally 