Question

我一直在学习创建chrome扩展程序。我已经尝试过hello world示例，它运行正常。现在我一直在尝试添加自定义代码，并根据我的要求对hello world代码进行一些更改。

我想要创建的是当用户点击地址栏中的图标时，它应该在地址栏下面打开 popup.html ，如图所示。屏幕截图来自名为 raindrop.io

的扩展程序

他们正在进行chrome扩展。当我点击图标时，它会在现有网页顶部和地址栏下方打开右侧抽屉，以显示我保存的所有书签。我想达到同样的效果，但我不知道从哪里开始。我听说有一些实验性的侧窗格，但谷歌删除了它。

修改

我已经采纳了这些建议并尝试实施。现在我被困在两个地方 -

如何在点击地址栏中的图标时打开窗口。现在它只是自动打开。我想在用户点击图标时打开它。
我正在做这一切来创建一个扩展的注释，我已经完成了创建一个笔记扩展，但它在弹出界面工作，但我想在侧边栏界面中实现。

这是我的代码 -

：一种。 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>

我的应用的截图，它在本地运作

Answer 1

Chrome扩展程序API中没有右侧面板。

您可以采用与示例扩展程序相同的方式执行此操作：

从标签

background.js

如果选项卡是可注入的，则创建内容脚本会将邮件发送到background.js（如果您需要在系统页面上正确扩展工作）
如果标签是可注射的，chrome.tabs.executeScript将您的菜单div注入页面/注入监听器，这将打开您的菜单。
利润。

有关如何在下面执行此操作的更多详细信息。

创建background.js听取浏览器图标的点击，并通知您的内容脚本有关点击次数。
禁止在默认弹出窗口中显示popup.html。

<强> manifest.js

....
"browser_action": {
},
"background": {
    "scripts":["background.js"]
},
...

<强> background.js

chrome.browserAction.onClicked.addListener(function(){
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
        chrome.tabs.sendMessage(tabs[0].id,"toggle");
    })
});

在content-script.js中使用popup.html（zero width开启display:none;样式）创建一个不可见的iframe。我使用zero width，因为您可能希望通过jquery为菜单显示设置动画，例如扩展名。
在内容脚本中添加消息侦听器，以接收从background.js脚本发送的消息。
接收消息时，显示或隐藏菜单块

内容-的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"; } }

使用浏览器HTML上下文可见的扩展上下文加载popup.html和脚本：

<强>的manifest.json

"web_accessible_resources": ["popup.html"]

了解更多

Chrome标签API：https://developer.chrome.com/extensions/tabs

Chrome消息传递：https://developer.chrome.com/extensions/messaging

浏览器操作点击处理：https://developer.chrome.com/extensions/browserAction#event-onClicked

内容脚本注入：https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/executeScript

如何在镀铬扩展中制作侧面板？

1 个答案:

有关如何在下面执行此操作的更多详细信息。

了解更多