Как сделать боковую панель в хромированном расширении?
Я учился создавать расширение Chrome. Я попробовал привет пример мира, и он работал нормально. Сейчас я пытаюсь добавить собственный код и внести некоторые изменения в код hello world в соответствии с моими требованиями.
Я пытаюсь создать, когда пользователь нажимает на значок в адресной строке, он должен открытьсяpopup.html под адресной строкой как показано на рисунке. Скриншот от расширения называетсяraindrop.io
Они делают это в рамках расширения Chrome. Когда я нажимаю на значок, он открывает правый ящик в верхней части существующей веб-страницы и под адресной строкой, чтобы показать все мои сохраненные закладки. Я хотел добиться того же эффекта, но я не знаю, с чего начать. Я слышал, что была какая-то экспериментальная боковая панель, но Google удалил ее.
РЕДАКТИРОВАТЬ
Я принял предложения и попытался реализовать это. Теперь я застрял в двух местах -
Как открыть окно при нажатии на значок в адресной строке. Прямо сейчас он просто открывается автоматически. Я хочу открыть его, когда пользователь нажимает на значок.Я делаю все это, чтобы создать расширение для заметок, и я создал расширение для заметок, но оно работает во всплывающем интерфейсе, но я хотел реализовать в интерфейсе боковой панели.Вот мой код для -
А. Интерфейс бокового окна в расширении Chrome
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
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. Расширение приложения для заметок
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">S I D E N O T E S </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>
Скриншот моего приложения, оно работает локально
