我一直在学习创建一个 chrome 扩展。我已经尝试过 hello world 示例，它运行良好。现在我一直在尝试添加自定义代码，并根据我的要求对 hello world 代码进行一些更改。
我想要创建的是当用户点击地址栏中的图标时，它应该打开 popup.html 地址栏下方，如图所示.屏幕截图来自名为 raindrop.io
的扩展程序他们正在做的是在 chrome 扩展中。当我单击该图标时，它会打开现有网页顶部和地址栏下方的右侧抽屉，以显示我保存的所有书签。我想达到同样的效果，但我不知道从哪里开始。我听说有一些实验性侧 Pane ，但谷歌已将其删除。
编辑
我采纳了这些建议并尝试实现。现在我被困在两个地方-
- 单击地址栏中的图标时如何打开窗口。现在它只是自己自动打开。我希望它在用户点击图标时打开。
- 我正在做所有这些来创建一个笔记扩展，我已经创建了一个笔记扩展，但它在弹出界面中工作，但我想在侧边栏界面中实现。
这是我的代码 -
A. Chrome 扩展中的侧窗界面
list .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/"
]
}
Content 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>
我的应用程序的屏幕截图，它在本地运行
最佳答案
chrome 扩展 API 中没有右侧面板。
但是您可以按照与您的示例扩展相同的方式进行操作:
- 创建
background.js从选项卡中监听消息 - 如果选项卡是可注入(inject)的(如果您需要您的扩展在系统页面上正常工作)，则创建一个内容脚本将消息发送到
background.js - 如果选项卡是可注入(inject)的，使用
chrome.tabs.executeScript将您的菜单 div 注入(inject)页面/注入(inject)监听器，这将打开您的菜单。
下面将详细介绍如何操作。
- 创建
background.js监听浏览器图标点击并通知您的内容脚本有关点击。 - 防止在默认弹出窗口中显示
popup.html。
list .js
....
"browser_action": {
},
"background": {
"scripts":["background.js"]
},
...
background.js
chrome.browserAction.onClicked.addListener(function(tab){
chrome.tabs.sendMessage(tab.id,"toggle");
});
- 在 content-script.js 中创建一个不可见的 iframe，使用您的 popup.html(
零宽度和display:none;样式)。我使用zero width是因为您可能希望像示例扩展那样通过 jquery 为您的菜单显示设置动画。 - 在内容脚本中添加消息监听器以接收从
background.js脚本发送的消息。 - 收到消息时，显示或隐藏菜单 block
content-script.js
chrome.runtime.onMessage.addListener(function(msg, sender){
if(msg == "toggle"){
toggle();
}
});
var iframe = document.createElement('iframe');
iframe.style.background = "green";
iframe.style.height = "100%";
iframe.style.width = "0px";
iframe.style.position = "fixed";
iframe.style.top = "0px";
iframe.style.right = "0px";
iframe.style.zIndex = "9000000000000000000";
iframe.frameBorder = "none";
iframe.src = chrome.extension.getURL("popup.html")
document.body.appendChild(iframe);
function toggle(){
if(iframe.style.width == "0px"){
iframe.style.width="400px";
}
else{
iframe.style.width="0px";
}
}
- 使您从扩展上下文加载的 popup.html 和脚本对浏览器 HTML 上下文可见:
list .json
"web_accessible_resources": ["popup.html"]
阅读更多
关于javascript - 如何在 chrome 扩展中制作侧面板？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39610205/