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

问题描述

我一直在学习创建Chrome扩展。我试过你好世界的例子，它工作正常。现在我一直试图添加自定义代码，并根据我的要求在hello world代码中进行一些更改。

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

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

编辑

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

1. 如何在地址栏中点击图标时打开窗口。现在它只是自动打开。我希望它在用户点击图标时打开。


2. 我正在做所有这些来创建笔记扩展，并且创建了笔记扩展，但它在弹出界面中工作，但是我想在侧边栏界面中实现。

这是我的代码 -

：一种。 Chrome扩展程序中的侧窗口界面

manifest.json

 {
manifest_version：2，
 
name：Hello World，
description：This extension to test html注入，
版本：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
}，
权限：[
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
$ b

 <！DOCTYPE html> 
< html lang =en> 
 
< head> 
< meta charset =utf-8> 
< title> SideNotes< / title> 
< link rel =stylesheethref =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 T S S< / p> 
< img id =logosrc =image / icon.pngalt => 
< / div> 
< div id =all-notes> 
< ul id =todo-items>< / ul> 
< / div> 
< div id =take-note> 
< form id =new-todo-formmethod =POSTaction =＃> 
< textarea id =new-todo>< / textarea> 
< input type =imagesrc =image / done.svgid =submitButton> 
< / form> 
< / div> 
< / div> 
< script type =text / javascriptsrc =js / jquery.min.js>< / script> 
< script type =text / javascriptsrc =js / custom.js>< / script> 
< script type =text / javascriptsrc =js / db.js>< / script> 
< script type =text / javascriptsrc =js / app.js>< / script> 
< / body> 
 
< / html> 
  

我的应用程序的屏幕截图，适用于本地

解决方案

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

你可以用同样的方式来做，就像你的扩展例子那样：

1. 创建 background.js 从选项卡收听消息
   
2. 创建内容脚本将消息发送到 background.js 如果tab是可注入的（如果你需要你的扩展工作在系统页面上正确）
   
3. 如果tab是可注入的，用 chrome.tabs.executeScript 将菜单div注入到页面/注入侦听器中，这会打开菜单。


4. 利润。

$
$ b

1. 创建 background.js

   更多细节如何做到。 $ c>听浏览器图标点击并通知您的内容脚本有关点击。



2. 禁止在默认弹出窗口中显示 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）; 
}）
}）; 
  





3. 在content-script.js中创建不可见的iframe ，用你的popup.html（零宽度， display：none; style）。我使用零宽度，因为您可能希望通过jquery来为菜单显示设置动画效果，例如扩展名为。


4. 在content-script add用于接收从 background.js 脚本发送的消息的消息侦听器。


5. 当收到消息时，显示或隐藏菜单块
$

$ b

content-script.js

  chrome.runtime.onMessage.addListener（函数（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; 
 
} 
  







6. 将popup.html和脚本从扩展上下文加载到浏览器html上下文中：
   


$ b manifest.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/zh-CN/Add-ons/WebExtensions/API/tabs/executeScript






I have been learning to create 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 user click on the icon in the address bar, it should open popup.html below address bar as shown in the picture. The screen shot is from extension called raindrop.io

They are doing is within chrome extension. When I click on the icon it opens right drawer on top of the existing webpage and below the address bar to show all my saved bookmarks. I wanted to achieve same effect but I dont know where to start. I have heard that there were 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 open automatically by itself. I want it open when user clicks on the icon.
2. I am doing all this to create a note taking 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 by same way, as your example extension does:

1. Create background.js listening messages from the tab
2. Create content script sends message to background.js if 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 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(){
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
        chrome.tabs.sendMessage(tabs[0].id,"toggle");
    })
});

3. In content-script.js create 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 like example extension does.
4. In content-script add message listener for receive messages sent from background.js script.
5. When receive 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";
    }
}

6. 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屋！