How to make a toolbar in Google Chrome?

后端未结

关注

 3  1959

不思量自难忘° 2020-12-01 01:18

I\'m exploring Google Chrome extensions for the first time. I would like to create what appears as a toolbar along the top of the page when you click the extension icon, muc

3条回答

孤街浪徒 (楼主)

2020-12-01 02:23
Although this answer shows two ways to create a toolbar in Chrome, I strongly recommend using page action or browser action badges. These do not take as much space as toolbars, and can also be used to show a panel on click, and even get temporary host permissions to interact with the page.

And for those who do not really need a toolbar, but a sidebar, there is an active proposal for a chrome.sidebar API. This is just a proposal, whether and when it will be implemented is not set in stone yet.

The chrome.infobars API

This section used to show a demo using the chrome.infobars API. This API has never been to the stable channel, and will be removed; do not use it.

Content scripts

Creation of toolbars using content scripts is tricky. You have to insert code in the page, and even modify the structure of the document, which could break some pages on the internet.

To create a toolbar using content scripts, the following steps have to be taken:
1. Execute a content script on the page which runs the next two steps.
2. Insert the toolbar (</code> - explained later).</li> <li>Shift the content of the page.</li> </ol> <p>Step 1 is easy, see my previous example or read the documentation of content scripts.</p> <h2>Step 2: Insert the toolbar</h2> <p>To minimize styling conflicts, and to prevent the page from using your toolbar, insert an iframe. Unlike the previous method, you do not directly have access to the extension API (because the embedded page is neither a content script, nor a page running in the extension's process).</p> <p>Inserting the toolbar:</p> <h3><code>add-toolbar.js</code> (content script)</h3> <pre class="lang-js prettyprint-override"><code>var height = '40px'; var iframe = document.createElement('iframe'); iframe.src = chrome.extension.getURL('toolbar.html'); iframe.style.height = height; iframe.style.width = '100%'; iframe.style.position = 'fixed'; iframe.style.top = '0'; iframe.style.left = '0'; iframe.style.zIndex = '938089'; // Some high value // Etc. Add your own styles if you want to document.documentElement.appendChild(iframe); </code></pre> <p>Now create a file called <code>toolbar.html</code> and add it to the "web_accessible_resources" section of your manifest file. This file is going to used at the spot of the toolbar, feel free to do anything non-evil with it. Just keep in mind that it acts like a normal web page, it literally does not have access to any of the Chrome APIs.</p> <h2>Step 3: Shifting the content</h2> <p>So far, you've only added a frame to the page. There's one problem: The content on the page is partially hidden. That is not very nice. There are several ways to fix this, I choose to use CSS transforms, because it's relatively easy to use, and most pages don't use this property on the body element.</p> <pre class="lang-js prettyprint-override"><code>// continuing add-toolbar.js var bodyStyle = document.body.style; var cssTransform = 'transform' in bodyStyle ? 'transform' : 'webkitTransform'; bodyStyle[cssTransform] = 'translateY(' + height + ')'; </code></pre> <p><code>translateY</code> causes the body to shift down, including those child elements with <code>position:fixed</code>. Because we've appended the iframe to the root element, outside the <code><body></code> tag, the element is not affected.</p> <h2>I want to use extension APIs in the toolbar!</h2> <p>Unfortunately, Chrome treats the embedded html page as a non-privileged extension page. You can only use some of the extension APIs (similar to content scripts).</p> <p>Another option is to load a page from your server, then execute a content script on that specific page. Set up a Cache manifest to ensure that your toolbar is still available if the user isn't on a network.</p> </p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='645638'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="645638"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> <div class="noreplaytext bb"> <center><div> <a href="https://www.e-learn.cn/qa/q-169651.html"> 查看其它3个回答 </a> </div></center> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_645638"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="645638">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />  加载中... </li> </ul> </div> </li> </ul> <div class="layui-form layui-form-pane"> <form id="huidaform" name="answerForm" method="post"> <div class="layui-form-item layui-form-text"> <a name="comment"></a> <div class="layui-input-block"> <script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.config.js"></script> <script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.all.js"></script> <script type="text/plain" id="editor" name="content" style="width:100%;height:200px;"></script> <script type="text/javascript"> var isueditor=1; var editor = UE.getEditor('editor',{ //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个 toolbars:[['source','fullscreen', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', 'anchor', '|', 'simpleupload', 'insertimage', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertcode', '|', 'horizontal', '|', 'preview', 'searchreplace', 'drafts']], initialContent:'', //关闭字数统计 wordCount:false, zIndex:2, //关闭elementPath elementPathEnabled:false, //默认的编辑区域高度 initialFrameHeight:250 //更多其他参数，请参考ueditor.config.js中的配置项 //更多其他参数，请参考ueditor.config.js中的配置项 }); editor.ready(function() { editor.setDisabled(); }); $("#editor").find("*").css("max-width","362px"); </script> </div> </div> <div class="layui-form-item"> <label for="L_vercode" class="layui-form-label">验证码</label> <div class="layui-input-inline"> <input type="text" id="code" name="code" value="" required lay-verify="required" placeholder="图片验证码" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid"> <span style="color: #c00;"><img class="hand" src="https://www.e-learn.cn/qa/user/code.html" onclick="javascript:updatecode();" id="verifycode"><a class="changecode" href="javascript:updatecode();"> 看不清?</a></span> </div> </div> <div class="layui-form-item"> <input type="hidden" value="169651" id="ans_qid" name="qid"> <input type="hidden" id="tokenkey" name="tokenkey" value=''/> <input type="hidden" value="How to make a toolbar in Google Chrome?" id="ans_title" name="title"> <div class="layui-btn layui-btn-disabled" id="ajaxsubmitasnwer" >提交回复</div> </div> </form> </div> </div> <input type="hidden" value="169651" id="adopt_qid" name="qid" /> <input type="hidden" id="adopt_answer" value="0" name="aid" /> </div> <div class="layui-col-md4">  <dl class="fly-panel fly-list-one"> <dt class="fly-panel-title">热议问题</dt>

How to make a toolbar in Google Chrome?

The chrome.infobars API

Content scripts

The `chrome.infobars` API