如何在 chrome 扩展中制作侧面板? [英] How to make side panel in chrome extension?

查看：25
本文介绍了如何在 chrome 扩展中制作侧面板?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

的扩展程序

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

编辑

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

  1. 如何在点击地址栏中的图标时打开窗口.现在它只是自动打开.我希望它在用户点击图标时打开.
  2. 我正在做这一切是为了创建一个笔记扩展程序，我已经创建了一个笔记扩展程序，但它在弹出界面中工作，但我想在侧边栏界面中实现.

这是我的代码 -

A.Chrome 扩展中的侧窗界面

ma​​nifest.json

<代码> {manifest_version":2，名称":你好世界"，描述":这个测试 html 注入的扩展"，版本":1.0"，内容脚本":[{run_at":document_end"，匹配":[https://*/*",http://*/*"],js":[js/jquery-1.11.3.js"，js/content-script.js"]，css":[css/custom.css"]}],浏览器动作":{default_icon":icon.png"；},权限":[活动标签"，https://ajax.googleapis.com/"]}

内容脚本.js

var iframe = document.createElement('iframe');iframe.style.background = 绿色";iframe.style.height = "100%";iframe.style.width = "360px";iframe.style.position =固定"；iframe.style.top = "0px";iframe.style.right = "0px";iframe.style.zIndex = "9000000000000000000";iframe.frameBorder =无"；document.body.appendChild(iframe);

B.记录应用扩展

popup.html

<html lang="en"><头><元字符集=utf-8"><title>SideNotes</title><link rel="样式表";href=css/style.css"><script src="popup.js"></script><身体><div class="container"><div id="工具栏"><p id=标题">S I D E N O T E S </p><img id="logo"src="image/icon.png";alt=">

<div id="all-notes"><ul id="todo-items"></ul>

<div id="注意事项"><form id="new-todo-form";方法=POST"动作=#"><textarea id="new-todo"></textarea><输入类型=图像"src=图像/完成.svg"；id=提交按钮"></表单>

<script type="text/javascript";src=js/jquery.min.js"></script><script type="text/javascript";src=js/custom.js"><script type="text/javascript";src=js/db.js"></script><script type="text/javascript";src=js/app.js">

我的应用的屏幕截图，它在本地运行

解决方案

chrome 扩展 API 中没有右侧面板.

你可以用同样的方式来做，就像你的示例扩展一样:

  1. 从标签创建background.js监听消息
  2. 如果选项卡是可注入的(如果您需要扩展程序在系统页面上正常工作)，则创建内容脚本将消息发送到 background.js
  3. 如果选项卡是可注入的，使用 chrome.tabs.executeScript 将您的菜单 div 注入页面/注入侦听器，这会打开您的菜单.
  4. 利润.

有关如何操作的更多详细信息，请参见下文.

  1. 创建 background.js 监听浏览器图标点击并通知您的内容脚本点击.
  2. 防止在默认弹出窗口中显示 popup.html.

ma​​nifest.js

<代码>....浏览器动作":{},背景": {脚本":[background.js"]},...

background.js

chrome.browserAction.onClicked.addListener(function(tab){chrome.tabs.sendMessage(tab.id,"toggle");});

  1. 在 content-script.js 中创建一个不可见的 iframe，使用您的 popup.html(zero width 和 display:none; 样式).我使用 zero width 因为你可能想通过 jquery 为你的菜单显示动画，就像示例扩展一样.
  2. 在内容脚本中添加消息侦听器，用于接收从 background.js 脚本发送的消息.
  3. 收到消息时，显示或隐藏菜单块

content-script.js

chrome.runtime.onMessage.addListener(function(msg, sender){如果(味精==切换"){切换()；}})var iframe = document.createElement('iframe');iframe.style.background = "绿色";iframe.style.height = "100%";iframe.style.width = "0px";iframe.style.position = "固定";iframe.style.top = "0px";iframe.style.right = "0px";iframe.style.zIndex = "9000000000000000000";iframe.frameBorder = "无";iframe.src = chrome.extension.getURL("popup.html")document.body.appendChild(iframe);功能切换(){if(iframe.style.width == "0px"){iframe.style.width="400px";}别的{iframe.style.width="0px";}}

  1. 使 popup.html 和从扩展上下文加载的脚本对浏览器 HTML 上下文可见:

ma​​nifest.json

"web_accessible_resources": ["popup.html"]

阅读更多

  1. Chrome 标签 API:https://developer.chrome.com/extensions/tabs
  2. Chrome 消息传递:https://developer.chrome.com/extensions/messaging
  3. 浏览器操作点击处理:https://developer.chrome.com/extensions/browserAction#event-onClicked
  4. 内容脚本注入:https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/executeScript

I have been learning to create a chrome extension. I have tried hello world example and it was working fine. Now I have been trying to add custom code and make some changes in the hello world code according to my requirements.

What I am trying to create is when the user clicks on the icon in the address bar, it should open popup.html below address bar as shown in the picture. The screenshot is from extension called raindrop.io

They are doing is within chrome extension. When I click on the icon it opens the right drawer on top of the existing webpage and below the address bar to show all my saved bookmarks. I wanted to achieve the same effect but I don't know where to start. I have heard that there was some experimental side pane but google has removed it.

EDIT

I have taken the suggestions and tried to implement that. Now I am stuck at two places -

  1. How to open the window when clicked on the icon in the address bar. Right now it just opens automatically by itself. I want it open when the user clicks on the icon.
  2. I am doing all this to create a note taking the extension and I have done creating a note-taking extension but it works in popup interface but I wanted to implement in sidebar interface.

Here is my code for -

A. Side Window 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/"
    ]
  }

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. Note Taking App 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">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>

Screenshot of my app, it works locally

解决方案

There is no right-side panel in chrome extension API.

By you may do it in the same way, as your example extension does:

  1. Create background.js listening messages from the tab
  2. Create a content script sends the message to background.js if the tab is injectable (if you need your extension work correct on system pages)
  3. If tab is injectable, with chrome.tabs.executeScript inject your menu div to the page / inject listener, which opens your menu.
  4. Profit.

More details about how to do it below.

  1. Create background.js listening browser icon clicks and notify your content script about clicks.
  2. Prevent showing of popup.html in default popup.

manifest.js

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

background.js

chrome.browserAction.onClicked.addListener(function(tab){
    chrome.tabs.sendMessage(tab.id,"toggle");
});

  1. In content-script.js create an invisible iframe, with your popup.html (with zero width on with display:none; style). I use zero width because of you may want to animate your menu display by jquery as example extension does.
  2. In content-script add message listener for receive messages sent from background.js script.
  3. When receiving the message, show or hide menu 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";
    }
}

  1. Make popup.html and scripts you load from extension context visible for browser HTML context:

manifest.json

"web_accessible_resources": ["popup.html"]

Read more

  1. Chrome Tabs API:https://developer.chrome.com/extensions/tabs
  2. Chrome message passing: https://developer.chrome.com/extensions/messaging
  3. Browser action click processing: https://developer.chrome.com/extensions/browserAction#event-onClicked
  4. Content script injection: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/executeScript

这篇关于如何在 chrome 扩展中制作侧面板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆