不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。
脱离webstore安装已发布的chrome extension 进入全屏
line

写给所有chrome-extension developers。


开发好了一个chrome-extension,在chrome webstore上发布以后,即可通过webstore进行安装。

但是有时候这个webstore经常被墙,或者打开速度超级慢,导致没法正常安装。


还好chrome官方提供了一个比较不错的途径,可以在你自己的网站上,直接安装你的chrome-extension。

URL:https://developers.google.com/chrome/web-store/


但是这是有个条件限制的,必须在webstore验证你的个人网站,验证的方法就不用赘述了,

到chrome-extension的发布页面,找到验证的地方,直接按照步骤操作即可。

验证通过以后,会是下面这个样子的:


和未验证的chrome-extension比起来,这里会多出来一个“来自 www.baidufe.com”


于是,我们可以写一个页面,用于安装这个chrome-extension,文件直接丢到我们自己网站下任何目录即可,

只要保证能通过你的域名访问到就成。

这个页面的代码,可以写成这样:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Chrome扩展直接安装</title>
        <!-- 指定关联关系:指定你需要安装的chrome-extension地址 -->
        <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad">
    </head>
    <body>
        <input type="button" id="btnInstall" value="点击安装ChromeExtension">
        <script>
            // 获取安装按钮
            var btnInstall = document.getElementById('btnInstall');
            // 绑定安装事件
            var bindInstallEvent = function(){
                window.addEventListener(btnInstall,'click',function(event){
                    chrome.webstore.install("https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad", 
                        function(){
                            alert("恭喜你,Chrome Extension安装成功");
                        },
                        function(err){
                            alert("抱歉,Chrome Extension安装失败");
                        });
                },false);
            };
                 
            // 通过这个API可以直接判断当前浏览器是否已经安装了这个chrome extension
            if (chrome.app.isInstalled) {
                btnInstall.value = "你已经安装过这个chrome扩展了";
            }else{
                // 绑定安装事件
                bindInstallEvent();
            }
        </script>
    </body>
</html>

如果代码对你有用,可以直接拿走。

趣店(原趣分期)技术学院
重点关注技术架构、服务化、优秀工具、自动化平台、开发全流程一体化解决方案、新人培养、工程师进阶之道等方面
这里环境优雅、氛围年轻、主要是福利还多,还等什么?我们敞开技术的大门,欢迎各种工程师加入!

评论区域

line
  • Alien 2014-04-29 09:47:46 回复
    回复 cncba : 现在访问web store 基本都不需要翻墙了,另外,这种直接安装的方式,是更便捷一些,因为只需要访问一个crx的请求即可完成安装
    cncba said:
    这样有用于加快下载安装速度吗?
    下载的时候是不是还得翻墙才行呢
  • cncba 2014-04-29 09:45:31 回复
    这样有用于加快下载安装速度吗?
    下载的时候是不是还得翻墙才行呢
  • Alien 2013-01-07 21:03:20 回复
    回复 天朝 : 首先你得有一个Google Webstore的账号,并且是缴费验证了的。登录到webstore后台,验证你的网站即可,过程稍有点儿繁琐。。。
  • 天朝 2013-01-04 22:55:29 回复
    怎么在webstore里验证个人网站啊 。大神
    天朝 said:
    怎么在webstore里验证个人网站啊 。大神