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

798qvoo8 于 2023-06-27 发布在 Go

关注(0)|答案(3)|浏览(155)

我一直在学习创建一个Chrome扩展。我尝试了Hello World的例子，它工作得很好。现在我一直在尝试添加自定义代码，并根据我的要求对hello world代码进行一些更改。
我尝试创建的是当用户点击地址栏中的图标时，它应该打开地址栏下方的popup.html****，如图所示。截图来自raindrop.io**扩展
他们正在做的是在Chrome扩展。当我点击图标时，它会打开位于现有网页顶部和地址栏下方的右侧抽屉，显示我所有保存的书签。我想达到同样的效果，但我不知道从哪里开始。我听说有一些实验性的侧窗格，但谷歌已经删除了它。

编辑

我接受了这些建议，并试图实施。现在我被困在两个地方-
1.点击地址栏图标时如何打开窗口。现在它只是自己自动打开。我希望它打开时，用户点击图标。
1.我这样做是为了创建一个笔记扩展，我已经创建了一个笔记扩展，但它在弹出界面中工作，但我想在侧边栏界面中实现。

这是我的代码
A. 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/"
    ]
  }

内容脚本.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>

我的应用程序的屏幕截图，它在本地工作

google-chrome

来源：https://stackoverflow.com/questions/39610205/how-to-make-side-panel-in-chrome-extension

3条答案

按热度按时间

rbpvctlc1#

Chrome扩展API中没有右侧面板。
但是您可以按照示例扩展的相同方式来执行：
1.从选项卡创建background.js侦听消息
1.如果选项卡是可插入的（如果您需要在系统页面上正确地进行扩展工作），则创建内容脚本将消息发送到background.js。
1.如果tab是可注入的，使用chrome.tabs.executeScript将menu div注入到page/inject监听器，这将打开菜单。

下面详细介绍如何操作。

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

- manifest. js**

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

- background. js**

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

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

- 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.使popup.html和从扩展上下文加载的脚本对浏览器HTML上下文可见：

- manifest. json**

"web_accessible_resources": ["popup.html"]

阅读更多

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

赞(0）回复(0）举报 2023-06-27

dkqlctbz2#

"manifest_version": 3的侧面板示例与版本2相同，为deprecated。
manifest.json（更改EXTENTION-KEY）：

{
...
    "version": "1.0",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js"
    },
    "action": {},
    "content_scripts": [
      {
        "matches": [
            "https://*/*",
            "http://*/*"
        ],
        "js": ["side-panel.js"]
      }
    ],
    "web_accessible_resources": [
      {
        "resources": ["popup.html" ],
        "matches": ["https://*/*", "http://*/*"],
        "extension_ids": ["<EXTENTION-KEY>"]
      }
    ]
  }

background.js:

chrome.action.onClicked.addListener(tab => {
  chrome.tabs.sendMessage(tab.id,"toggle");
  console.log('message sent');
});

side-panel.js:

console.log("side-panel script loaded");

chrome.runtime.onMessage.addListener(function(msg, sender){
    if(msg == "toggle"){
        console.log("message received");
        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.style.border = "0px"; 
iframe.src = chrome.runtime.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:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="popup.css">
  </head>
  <body>
    Content
  </body>
</html>

赞(0）回复(0）举报 2023-06-27

r8uurelv3#

Chrome现在已经推出了114及以上版本的side panel，你可以设置一个页面，就像你会与弹出或选项页面一样。我已经编写了一个带有可克隆存储库的blog post，介绍了如何使用内容脚本，并通过端口消息传递消息来动态显示用户交互。

赞(0）回复(0）举报 2023-06-27

我来回答

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

3条答案

下面详细介绍如何操作。

阅读更多

相关问题

热门标签

最新问答