• 独立网站启用Chrome插件内联安装教程

    关于Chrome插件想必用Chrome浏览器的童鞋都很清楚,不过这标题写的说实话有点让人晕,要解释清楚标题,首先要了解一下Chrome插件的安装机制。

    Chrome插件安装机制

    目前据我的了解,你可以用这3种方法安装Chrome插件

    1. 在Chrome Web Store查找插件或者是打开某一个插件在Chrome Web Store上的链接,点击安装即可,这是最常用最通用的方法
    2. 获得扩展名为crx的插件 > 打开Chrome浏览器的扩展程序页面 > 将获得的文件直接拖拽至上一步所述页面 > 安装
    3. 拥有插件的zip压缩包 > 解压文件 > 打开Chrome浏览器的扩展程序页面 >启用开发者模式 > 点击“加载正在开发的扩展程序”并选择刚才解压出来的文件目录

    然而本文所介绍的插件安装方法并不属于上述任意一种,这就是下面要说的第4种安装方法

    内联安装(Inline Installation)

    这内联安装我用一句话概括就是:你制作了一个插件并且已经在Chrome Web Store上发布,同时你还想让你网站内的用户也能够直接在你的网站上安装插件而不用再跑到Chrome Web Store那里。

    如果还是不太明白的话可以看看下面人家官方的原文

    Once you’ve published your app or extension, you may be wondering how users will find and install your app. For users who browse the Chrome Web Store and find your item, its a very easy one-click process to install it. However, if a user is already on your site, it can be cumbersome for them to complete the installation – they would need to navigate away from your site to the store, complete the install process, and then return.Chrome插件内联安装图片

    As of Google Chrome 15, you can initiate app and extensions installations “inline” from your site. These apps and extensions are still hosted in the Chrome Web Store, but users no longer have to leave your site to install them.

    When users install the app, they will see an installation confirmation dialog similar to the one pictured on right. Just like the dialog displayed when installing directly from the Chrome Web Store, it lists all of the permissions that your app or extension is requesting. Additionally, this dialog includes the average Chrome Web Store rating and the number of users, giving users extra confidence about what they are about to install.

    内联安装的必要条件

    • 插件已经在Chrome Web Store上发布
    • 内联安装的页面地址必须是插件在Chrome Web Store上发布时所关联网站的子域或子页面(比如插件发布时关联的网站是http://www.zenoven.com,那么内联安装页面的地址可以是http://chrome-extensions.www.zenoven.com或者http://www.zenoven.com/chrome-extensions)

    内联安装页面的制作

    1、在页面的head内插入一个Chrome Web Store link

    即将下面的代码插入页面<head></head>之间

    <link rel=”chrome-webstore-item” href=”https://chrome.google.com/webstore/detail/itemID“>

    itemID可以在打开一个插件的Chrome Web Store链接后找到,下面是我的查看源码Chrome插件的link

    <link rel=”chrome-webstore-item” href=”https://chrome.google.com/webstore/detail/ggkbiakmiljlbbfhjajlpjgckcjanbab“>

    2、触发内联安装

    原文里面写的比较多,按照我的理解其实很简单也就是用JS写些判断代码,增强用户体验,下面是我个人的一些逻辑步骤

    1. 在页面合适的地方插入一个按钮或链接或者是你想用的元素,用于触发安装,这里假设为一个button
    2. 用JS判断浏览器是否是Chrome,如果不是则将button设为disabled并且button内的文本修改为“只适用于Chrome浏览器”,如果是的话就直接进入下一步
    3. 判断该插件是否已安装,如果已安装则修改button文本为“已安装”并且设为disabled,如果未安装则进入下一步
    4. 调用安装函数,修改button文本为“正在安装…”并且设为disabled
    5. 根据安装结果修改button(安装成功则修改button文本为“安装成功”并且设为disabled,否则将button状态及文本恢复到点击button之前)

    说了那么多,其实就是这段JS代码(需jQuery,另外上面所说的button已经在页面内插入,并且button的id为install-button)

    (function($){
      var e = $('#install-button')
        ,originalText = e.html()
        ,itemURL = $('link[rel=chrome-webstore-item]').attr('href')
        ,isChrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase());
      checkAndSetButton();
      e.click(function(){
        e.html('正在安装...').attr('disabled',true);
        chrome.webstore.install(
          itemURL
          ,function(){
            e.html('安装成功!').attr('disabled',true);
          }
          ,function(){
            e.html(originalText).attr('disabled',false);
          }
        );
      });
      function checkAndSetButton(){
        if(isChrome){
          if (typeof chrome !== "undefined" && typeof chrome.app !== "undefined" && chrome.app.isInstalled) {
            e.html('已安装').attr('disabled',true);
          }
        }else{
          e.html('只适用于Chrome浏览器').attr('disabled',true);
        }
    
      }
    })(jQuery);
    

    好了,上面就是独立网站启用Chrome插件内联安装教程的主要内容了。

    PS:有的童鞋可能会问怎么样才能在指定页面的指定位置插入任意代码呢?我的办法是安装一个插件:Code Insert Manager ,该插件就可以在不改动任何代码的情况下完成上述任务。

    另附一些我制作的Chrome插件:

  • Chrome插件[百度一下]发布

    Chrome浏览器百度一下插件发布啦~~写这个有两点,一个是方便大家(有时候迫于万恶的GFW,你懂的),一个是练习下JS,当然,这个插件很简单,高手可以直接忽略~~

    百度一下Chrome插件

    此插件功能如下:

    1、在网页上选中文字后直接点击右键,用百度搜索。
    2、在地址栏右侧点击该插件的百度图标也可直接打开百度首页
    3、还可设置点击该插件的百度图标时弹出小窗口,在小窗口搜索,在新标签云显示搜索结果。

    详情百度一下

  • 我在用的几款Chrome插件

    Chrome其实很早就听说了,但是我真正使用Chrome其实没多久,时下他在浏览器中的份额逐日增长这一方面是Google自身的品牌优势,另一方面Chrome确实有些杀伤力。这里就说下zenoven正在用的几款Chrome插件,看看他们是如何增强Chrome战斗力的。

    我就用了5个插件,先来个全家福 。

    Chrome插件

    1、AdBlock(广告屏蔽插件)

    这款广告屏蔽插件非常的强悍,他可以悄无声息的屏蔽掉页面中的AD,甚至连包含AD的DIV都给剔除了。

    我最近做一个网页的时候有一个sidebar中的widget是准备放AD,由于还没做好就只放了些文字,但用Chrome测试的时候发现竟然没有了,看代码正常,而且用其他浏览器则正常,这再一想,哦!原来被屏蔽了!下面分别是广告屏蔽前和被屏蔽后的截图。

    带广告时 广告被屏蔽

    2、Google Reader Notifier (by Google)(GR订阅更新提醒插件)

    这是Google自己的插件,可以在浏览器上提醒用户你的GoogleReader订阅有更新,当然还有其他的提醒插件,由于这个已基本满足我的需求就没有找更好的。

    GoogleReaderNotifier设置界面该插件可以设置点击插件时是显示弹出窗口还是直接打开GoogleReader,还可以设置更新频率(5分钟到30分钟)。当有订阅更新时插件上会以红色数字显示有多少条新的订阅。

    无更新时是灰色的 无更新时是灰色的   有更新时红色显示更新条数

    3、Proxy Switchy!(代理切换插件)

    Firefox下面有autoproxy 等众多插件,Chrome下面当然也有类似的,这个插件就是自动切换代理的,用这个插件可以很容易的翻/墙玩Twitter、YouTube(还有什么玩的?Google呗。。。呵呵)

    我用的是英文版的(网上还有中文版的,可以自行搜索),具体用法可以参考这篇文章

    英文版用法图解 http://www.laogeng.org/archives/670.html

    4、人人网改造器

    5、屏蔽百度竞价排名baidu-adblock

    人人网改造器和屏蔽百度竞价排名baidu-adblock都是广告屏蔽插件,还你一个更好的上网环境,特别是baidu-adblock可以将竞价排名的搜索结果都给屏蔽了,这下那些恶心的推广就看不到了(还可以设置仍旧显示,但是是高亮显示)!由于都是中文的很好操作,这里就不再赘述了。

  • 每日一谈:WordPress用插件OR代码?

    相信很多最开始用WordPress的朋友都会装几个插件来满足博客的一些功能。不过到了后期,慢慢发现有很多功能是可以不用插件,直接用代码实现的。

    我认为,插件和代码有这么几点可以比较的地方。

    1、功能

    一般来说,插件的功能比较强,考虑的很全面,而且是做过比较多的测试,能适应比较多的环境。代码呢,一般功能上也够用,但是很少有插件考虑的全面。

    2、易用性

    插件只要会安装,然后按照插件的说明基本上就可以了,比较简单。

    代码的要求就高了点,要会改代码,这对没接触过WordPress或网页的朋友来说就比较困难了。

    3、设置界面

    插件的界面比较美观,很人性化,设置很容易。

    代码一般只有执行的部分,WordPress后台是看不到设置的,也就谈不上界面了。

    4、速度

    插件由于加载的文件比较多,另外考虑了很多情况,文件中可能有比较多的代码,如果插件太多的话,速度很可能就变慢了。

    代码一般比较精简,针对特定的功能有特定的代码,速度比较快。

    5、安全性

    所谓树大招风,一个插件用户多了,安全问题也来了,WordPress的攻击方式中就有利用插件漏洞的,不过一般情况下很少。

    代码呢,一般使用的人数比较少,也就相对安全,就像windows和Linux一样。

    你,喜欢用什么方式来实现WordPress的功能呢?

  • WordPress折腾记-精简CSS及JS在插件中的调用

    爱折腾WP是我的一个习惯,不折腾就会手痒,哈哈~~此文仅作为一个精简CSS及JS在插件中调用的范例,其他插件的精简可以按照此文的方法来做。

    众所周知,减少HTTP请求次数的一个途径是将CSS JS文件合并在一块,减少HTTP请求次数可以在一定程度上加快网页访问速度。为了速度,我就更加爱折腾了,呵呵。废话不多,下面是我今天的记录。

    先提醒一下,在修改前一定做好备份,这是个绝对无害处的好习惯,下文不再提醒。

    1、修改PageNavi的CSS调用,将其合并在主题目录中的style.css中(PageNavi是个WP分页插件,使用的人数还是不少的)。

    首先打开wp-pagenavi.php,找到下面的代码

    ### Function: Enqueue PageNavi Stylesheets
    add_action(‘wp_print_styles’, ‘pagenavi_stylesheets’);
    function pagenavi_stylesheets() {
    if(@file_exists(TEMPLATEPATH.’/pagenavi-css.css’)) {
    wp_enqueue_style(‘wp-pagenavi’, get_stylesheet_directory_uri().’/pagenavi-css.css’, false, ‘2.50’, ‘all’);
    } else {
    wp_enqueue_style(‘wp-pagenavi’, plugins_url(‘wp-pagenavi/pagenavi-css.css’), false, ‘2.50’, ‘all’);
    }
    }

    删除之(这些就是加载pagenavi-css.css的代码)

    然后将pagenavi-css.css 中的内容,全部复制到你的主题目录中的style.css 中,保存即可。另外将其复制到style.css的时候,最好做好备份和注释

    2、修改wp-easyarchives的CSS及JS调用。 搜索下面代码

    // — head START

    将head START 和 head END中的代码都删除掉,即删除下面的代码

    function easyarchives_head() {
    $options = get_option(‘wp_easyarchives_options’);

    $script_html = ”;
    if($options[‘js_type’] == ‘normal’) {
    $script_html = ‘<script type=”text/javascript” src=”‘ . get_bloginfo(‘wpurl’) . ‘/wp-content/plugins/wp-easyarchives/js/wp-easyarchives.js”></script>’;
    } else if($options[‘js_type’] == ‘custom_jquery’) {
    if($options[‘jquery_url’] == ”) {
    $script_html = ”;
    } else {
    $script_html = ‘<script type=”text/javascript” src=”‘ . $options[‘jquery_url’] . ‘”></script>’;
    }
    $script_html .= ‘<script type=”text/javascript” src=”‘ . get_bloginfo(‘wpurl’) . ‘/wp-content/plugins/wp-easyarchives/js/wp-easyarchives-jquery.js”></script>’;
    } else {
    $script_html = ‘<script type=”text/javascript” src=”‘ . get_bloginfo(‘wpurl’) . ‘/wp-content/plugins/wp-easyarchives/js/wp-easyarchives-jquery.js”></script>’;
    }

    echo “\n” . ‘<!– START of script generated by WP-EasyArchives –>’;
    echo “\n” . ‘<!– END of script generated by WP-EasyArchives –>’ . “\n”;
    }
    add_action(‘wp_head’, ‘easyarchives_head’);

    现在wp-easyarchives的CSS和JS调用都没有了,但是我们还需要啊,下面我们可以将wp-easyarchives的CSS文件及JS文件都嵌入到别的CSS和JS文件中。比如我的主题是iNove的,对于CSS文件我将wp-easyarchives.css中的内容全部复制到了sytle.css中,对于JS文件,由于wp-easyarchives 插件提供了不止一个JS,我们可以选择一个,将其复制到inove/js/base.js 中。

    现在经过我们这样做之后,其实wp-easyarchives.php的下面这部分代码已经没有作用了(我们在wp-easyarchives的后台设置中虽然可以看到设置,但是设置已经没有作用了,因为前面我们已经删过别的代码了),可以将其删除。

    <form action=”#” method=”post” enctype=”multipart/form-data” name=”wp_easyarchives_form”>
    <div>
    <h2><?php _e(‘WP-EasyArchives Options’, ‘wp-easyarchives’); ?></h2>

    <table>
    <tbody>
    <tr valign=”top”>
    <th scope=”row”><?php _e(‘JavaScript Library’, ‘wp-easyarchives’); ?></th>
    <td>
    <label style=”margin-right:20px;”>
    <input name=”js_type” type=”radio” value=”normal” <?php if($options[‘js_type’] != ‘custom_jquery’ && $options[‘js_type’] != ‘wp_jquery’) echo “checked=’checked'”; ?> />
    <?php _e(‘Use normal JavaScript library that is supported by this plugin.’, ‘wp-easyarchives’); ?>
    </label>
    <br />
    <label>
    <input name=”js_type” type=”radio” value=”wp_jquery” <?php if($options[‘js_type’] == ‘wp_jquery’) echo “checked=’checked'”; ?> />
    <?php _e(‘Use jQuery library that is supported by WordPress.’, ‘wp-easyarchives’); ?>
    </label>
    <br />
    <label>
    <input name=”js_type” type=”radio” value=”custom_jquery” <?php if($options[‘js_type’] == ‘custom_jquery’) echo “checked=’checked'”; ?> />
    <?php _e(‘Custom jQuery.’, ‘wp-easyarchives’); ?>
    </label>
    <label>
    <?php _e(‘Please input the URL of jQuery:’, ‘wp-easyarchives’); ?>
    <input type=”text” name=”jquery_url” size=”40″ value=”<?php echo($options[‘jquery_url’]); ?>” />
    </label>
    </td>
    </tr>
    </tbody>
    </table>

    <p>
    <input type=”submit” name=”wp_easyarchives_save” value=”<?php _e(‘Save Changes’, ‘wp-easyarchives’); ?>” />
    </p>
    </div>
    </form>

    OK,折腾到此结束。其实很多插件如果涉及到了在前台的显示,都会增加一些CSS和JS文件,我们的方法都是找到其调用的代码,然后删除之,接着将被调用到的那些代码添加到我们主题里面的CSS和JS文件中。

  • Get Recent Comments插件乱码问题终解决

    一直以来我的最新评论里都是有乱码的,朋友也说过,但是由于一直感觉没什么大的影响就一直拖着不去解决。今天没事了,想去掉一些插件来给WP提速下,于是想到去掉这个插件,但是去掉后再用主题默认的评论,感觉太简陋了,而且在sidebar显示的只是AA在BBB文章上面有评论,并没有显示评论,而且博主自己的评论也显示不出来了,与Get Recent Comments 比起来实在是太弱了,便马上把他启用回来了。

    在后台修改了Get Recent Comments 的设置,刚开始改错了设置,把那个Wrap long words at: 改到了20,我以为是当评论达到一定长度后截断评论呢,也没注意,又去改Long comments are chopped off at:   。这么改好后去前台一看。。。评论中出现了很多乱码,这就让我开始找Get Recent Comments 乱码问题的解决办法。

    第一次Google到的是一个博客修改过的Get Recent Comments 插件,文中提到了乱码问题,但是感觉麻烦也就没用这个。后来继续找,这次Google到的方法改是Get Recent Comments 中Wrap long words的设置。。。这下让我纳闷了,原来是我理解的错误,自己的改动导致的乱码。。。 :(8): 马上把Wrap long words的设置改大,问题解决。。。

    但是现在还有个问题,改Long comments are chopped off at:是当评论超过一定字数后将评论替换为省略号,而不是截断评论。。。这着实有点不爽,看来我还得接着找方法。。。

    不知道朋友们有没有什么方法,将评论截断,而不是全部用省略号代替呢?