资讯专栏INFORMATION COLUMN

chrome插件one-read开发2:细节

Invoker / 2112人阅读

摘要:关于页面,你可以查看这里获取帮助这里是我们的主要这里会主要负责我们的主要逻辑,包括实现,的解析,小偷程序的实现。

阅读我的博客文章:chrome插件one-read开发:细节

前言

点击这里你可以看到one-read "一览" chrome版的使用

代码在这里:github code for one-read

coding地址:coding.net for one-read

manifest文件
  

这里有详细关于manifest的介绍文档,点击访问

json    {
    // 必须的字段
      "name": "one-read",
      "version": "0.1",
      "manifest_version": 2,
      // 建议提供的字段
      "description": "内容聚合",
      "icons": { 
        "16": "icons/icon16.png",             
        "48": "icons/icon48.png",            
        "128": "icons/icon128.png" 
      },
      "browser_action": {
        "default_icon": "icons/StatusIcon.png", // optional 
        "default_title": "一览",   // optional; shown in tooltip 
        "default_popup": "popup.html",       // optional 
        "scripts": ["js/jquery.min.js","js/bootstrap.min.js","js/pop/popup.js"]
      },



      "permissions": [
        "http://*/",
        "http://jandan.net/feed",
        "http://xueqiu.com/hots/topic/rss",
        "http://mindstore.io/",
        "http://segmentfault.com/blogs",
        "http://www.zhihu.com/explore",
        "http://solidot.org.feedsportal.com/c/33236/f/556826/index.rss",
        "http://www.jianshu.com/",
        "http://next.36kr.com/posts"
      ]
    }  

着重介绍下permissions的属性,如果你不声明的话,你将无法获取到你想要获取的内容

popup页面
  

popup作为我们唯一加入的页面。这里是我们主要的面向用户的页面,这个页面会被渲染,同时展示在用户面前,因为有“一览”的界面,所以我只做了一点点的改动。关于pop页面,你可以查看这里获取帮助


pop.js
  

这里是我们的主要pop.js,这里会主要负责我们的主要逻辑,包括ajax实现,xml的解析,小偷程序的实现。

ajax的实现我做了少量的改动

javascript    // common function
    //ajax发送执行的公共函数
    function commonAjaxFn(ajaxType, ajaxUrl, ajaxDataType, successFn){
        $.ajax({
                type: ajaxType,
                url: ajaxUrl,
                dataType: ajaxDataType,
                beforeSend: ajaxBeforeFn,
                success: function(data){successFn(data)},
                error: ajaxErrorFn,
                complete: ajaxCompleteFn
        });
    }
    function ajaxFn(data){

    }

    //ajax执行前的公共函数
    function ajaxBeforeFn(){
        $(".pop-div").show();
        $(".net-ok").hide();
        $(".spinner").show();       
    }

    //ajax执行完成后的公共函数
    function ajaxCompleteFn(){
        $(".spinner").hide();
        $(".net-ok").show();
        $(".pop-div").hide();
    }

    //ajax执行后错误的公共函数
    function ajaxErrorFn(){

    }

xml解析:以煎蛋为例子

点击按钮后的代码

javascript    //jianshu
    $("#jianshu-btn").on("click",function(){
        $("#nowDot").css({"left":"166px"});
        $("#jianshu-page").html("");
        commonAjaxFn("GET","http://www.jianshu.com/","html",jianshuFn);
        return false;
    });
{% endhighlight %}

或许执行的代码,解析xml
{% highlight javascript %}
    //煎蛋函数
    function jandanFn(data){
        var ulHtml="";

        $(data).find("channel").find("item").each(function(index, ele) {
            if (index > 9) { return false};
            var title = $(ele).find("title").text();
            var link = $(ele).find("link").text();
            var  des = $(ele).find("description").text();
            var commentNum = $(ele).find("slashComments").text();
            var liHtml = "
  • "+title +"

    " +"

    "+commentNum+" 条评论 | "+des+"

  • "; ulHtml += liHtml; }); $(".cat-list ul").hide(); $("#jandan-page").html(ulHtml).show(); }

    “小偷程序”的实现(针对没有xml)

    javascript    //mindstoreFn
        function mindstoreFn(data){
            var ulHtml="";
    
            $(data).find("#mind-list").find("ul").eq(0).find("li").each(function(index, ele) {
                if (index > 9) { return false};
                var title = $(ele).find(".mind-title>a").text();
                var link = $(ele).find(".mind-title>a").attr("href");
    
                var  itemString = $(ele).html();
                var zanNum = $(ele).find(".vote-total").text();
                var mindDes = $(ele).find(".mind-des").text();
    
                var liHtml = "
  • "+title +"

    " +"

    "+zanNum+" 条支持 | "+mindDes+"

  • "; ulHtml += liHtml; }); $(".cat-list ul").hide(); $("#mindstore-page").html(ulHtml).show(); }
    整体

    bootstrap作为前端框架

    jquery作为js框架

    360扩展文档作为支持文档

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/49532.html

    相关文章

    • chrome插件one-read开发3:提升

      摘要:加载代码具体实现更好的方式了解了上面两种方式以后,我们不难发现,如果能够采用两者的结合会是一个不错的方式。其实解决方案就是缓存。我们主要采用方案,但是同样制作标记,每次打开时执行缓存的文件执行缓存中的校验检查是否变动,如果变动,更新缓存 阅读我的博客文章:chrome插件one-read开发:提升 前言 点击这里你可以看到one-read 一览 chrome版的使用 代码在这里:...

      econi 评论0 收藏0
    • chrome插件one-read开发1:准备

      摘要:阅读我的博客文章插件开发准备前言为啥要做这个,因为我原本想用做一个书签管理的东西,但是很久没有碰过的插件开发了。点击这里获取相关代码地址开始开始之前,说说这次做的东西是什么。 阅读我的博客文章:chrome插件one-read开发:准备 前言 为啥要做这个,因为我原本想用chrome做一个书签管理的东西,但是很久没有碰过chrome的插件开发了。所以先做一个简单的,来熟悉下...

      宋华 评论0 收藏0
    • 基于 Github API 的图床 Chrome 插件开发全纪录

      摘要:最近基于开发了一款图床插件,现在已经开源并上架应用商店。通过方法把转成,然后放在里测试一下看来效果是的,接下来就是对图床插件进行开发的步骤了。至此,整个插件的开发发布流程就已经完成了。 showImg(https://user-images.githubusercontent.com/12172868/57382983-8f29b900-71e0-11e9-8fe9-c0f12fd54...

      DoINsiSt 评论0 收藏0
    • Cordova应用的JavaScript代码和自定义插件代码的调试

      摘要:首先打开安卓手机的调试模式,然后用数据线连接到电脑上。打开开发者工具,这里我就能看到我正在运行应用的三星手机,,状态处于已连接状态。 我之前写过三篇Cordova相关的技术文章。当我们使用Cordova将自己开发的前端应用打包安装到手机上后,可能会遇到需要调试Cordova应用的时候。 本文就介绍Cordova应用的调试步骤。 如果大家读过之前我写的文章,就知道Cordova应用在移动...

      LiangJ 评论0 收藏0

    发表评论

    0条评论

    Invoker

    |高级讲师

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <