初次尝试Chrome扩展开发——以幻灯片方式显示网页内的图片

使用Chrome浏览器很长时间了。每次在论坛里看图片的时候，总会觉得广告和文字太多，心里想如果能够全屏看图片就好了。

于是准备开发一个Chrome扩展,命名为imageGallery：

  • 能以全屏幻灯片的方式浏览图片
  • 能将尺寸比较小的图片过滤掉
  • 支持快捷键

本人在工作中做的是桌面和嵌入式开发，只用过C/C++/C#，对javascript/jQuery没有怎么接触过。代码中如果存在什么问题，请大家原谅。

准备工作

首先是需要找一个jQuery的幻灯片插件。在比较几个插件之后，最后选择了GALLERIA。主要是它提供的全屏模式，比较符合我心中的要求。同时学习下Chrome的扩展开发文档，熟悉开发流程。

正式开始

1. 扩展清单文件（manifest.json）

创建imageGallery目录。在该目录下创建文件manifest.json。这里面包含了扩展的相关信息，以供Chrome使用。本文只对用到的字段做简单解释，可参见 详细的介绍。 
{
  // 插件名称
"name": "imageGallery",
  // 插件版本,Chrome会根据插件的版本号大小，来判断是否需要升级
"version": "1.0",
  // 插件描述，显示在扩展管理页面（chrome://extensions/）中
"description": "show the images of the page in a slide",
  
  "icons": {"16": "icons\\gallery16.png", // 16*16, 作为扩展页面的favicon
"48": "icons\\gallery48.png", // 48*48, 扩展管理页面（chrome://extensions/）中使用
"128": "icons\\gallery128.png"}, // 128*128 安装过程以及Chrome WebStore中使用
  
  // 后台页面，本扩展中用来监控以下事件
// 1. 用户点击浏览器工具栏的扩展图标
// 2. Tab页更新事件
"background_page": "background.html",
  // 配置页面
"options_page": "options.html",
  // 权限
"permissions": [
    "tabs", "http://*/*"// 允许扩展使用chrome.tabs或者chrome.windows模块
  ],
  // 在web页面满足某种条件时，注入js或者css（存在一些限制，后面详细讲）
"content_scripts": [
    {
      "matches": ["http://*/*"], // 匹配任意web页面
"js": ["jquery-1.4.3.min.js", "galleria.js", "imageGallery.js", "themes\\fullscreen\\galleria.fullscreen.js"]
    }
  ],
  // 定义扩展在浏览器工具栏的显示
"browser_action": {
    "default_title": "Click to show image gallery", // 提示文本
"default_icon": "icons\\gallery48.png"// 显示在浏览器工具栏的扩展图标
  }
}
复制代码

 

在imageGallery目录下，创建background.html和options.html，内容可以为空。同时将不同分辨率（16*16,48*48,128*128）的图标拷贝到icons目录下。确保manifest.json中指定的文件都存在，不然Chrome将无法载入该扩展。

2. 载入jQuery和Galleria

下载jQuery，保存在imageGallery目录下。本扩展中采用的版本是1.4.3。下载GALLERIA,将galleria.js保存在imageGallery目录下。使用fullscreen主题。保存在themes\fullscreen\下。

创建imageGallery.js，在里面输入：

if (Galleria){
    console.log("Galleria is imported");
}
复制代码

打开chrome://extensions/，选择开发人员模式，点击“载入正在开发的扩展程序...”，选择刚才创建的imageGallery目录。这样imageGallery扩展就被载入。

打开任意一个网页，比如http://www.google.com.hk,然后打开开发人员工具，可以看到Console输入了“Galleria is imported”，说明Galleria已经被载入。

3. 使用galleria显示页面中所有图片

移除imageGallery.js之前的测试代码，修改为如下：

function showGallery(){
    if (Galleria){
        if($("#img_Gallery").length ==0){
            // 1. 如果不存在id为img_Gallery节点，则创建
            $('<div id="img_Gallery"></div>').appendTo($("body"));
            
            // 2. 将所有img节点附加img_Gallery
            $("img").each(function(){
                $("#img_Gallery").append($(this));
            });
            
            // 3. 使用galleria显示
if($("#img_Gallery").children().length >0){
                Galleria_loadTheme(); // 加载fullscreen theme，与正规的方式不同，
// 对galleria.fullscreen.js做了点修改，方便使用，
                
                // 调用galleria
                $('#img_Gallery').galleria({
                    transition: 'fade', // 过渡效果
                    image_crop: false
                });
            }
        }
    }
}
复制代码

在background.html中监听浏览器工具栏的扩展图标（browserAction）点击事件（onClicked），调用showGallery函数。在background.html添加如下代码：

<html>
<head>
<script>
function loadImageSlide(tab) {
    if(tab){
        chrome.tabs.executeScript(null, {code: "showGallery()"});
    }
}

chrome.browserAction.onClicked.addListener(loadImageSlide);
</script>
</head>
</html>
复制代码

 

通过chrome.tabs.executeScript接口，可以在Tab页中执行脚本，null代表当前Tab页。重新加载扩展后，单击扩展图标应该就可以将页面内的图片全屏显示。

4. 添加快捷键支持

在imageGallery.js中添加：

$("body").keydown(function (event){
    // Alt + S
if(event.keyCode ==83&& event.altKey){
        showGallery();
    }
})
复制代码

当用户按Alt+S时，执行showGallery，将页面内的图片全屏显示。　

5. 为扩展添加选项

在options.html添加：

<html>
<head>
    <script src="jquery-1.4.3.min.js"></script>

    <style>
        .main_div{
            text-align: center;
            width:500px;
            margin-left: auto;
            margin-right: auto;
        }
        .sub_div{
            text-align: left;
        }
    </style>
<title>options</title>
</head>
<body onload="reloadOptions()">
    <div class="main_div">
    <!-- 最小高度 -->
    <div class="sub_div">height &gt; <input id="min_height"/> px</div>
    <div class="sub_div">width  &gt; <input id="min_width"/> px</div>
    <div class="sub_div">width-height ratio &lt; <input id="wh_ratio"/> </div>
    <div class="sub_div" style="font-size: 10; ">(width/height and height/width)</div>
<div class="sub_div">--------------------------------------------</div>
<div class="sub_div"><b>shortcut key: </b>
<ul>
            <li>Alt + S: Show gallery</li>
</ul>
</div>
<div class="sub_div">
        <button onclick="saveOptions()">Save</button>
</div>
</div>
<script>
    function saveOptions(){
        localStorage["min_height"] = $("#min_height").val(); 
        localStorage["min_width"] = $("#min_width").val();
        localStorage["wh_ratio"] = $("#wh_ratio").val();
        
        reloadOptions();
    }
    
    function reloadOptions(){
        min_height = localStorage["min_height"] ||200; // 默认值
        min_width = localStorage["min_width"] ||200; // 默认值
        wh_ratio = localStorage["wh_ratio"] ||3; // 默认值
        
        $("#min_height").val(String(min_height));
        $("#min_width").val(String(min_width));
        $("#wh_ratio").val(String(wh_ratio));
    }
    </script>
</body>
</html>
复制代码

在options.html中，将配置属性（最小高度，最小宽度，宽高比的最大值）保存在localStorage。然后修改background.html， 添加如下代码：　　

function loadOptions(tabId, changeInfo, tab) {
    var min_height = localStorage["min_height"] ||200;
    var min_width = localStorage["min_width"] ||200;
    var wh_ratio = localStorage["wh_ratio"] ||3;
    var options ="min_width = "+ min_width +";"+
                  "min_height = "+ min_height +";"+
                  "wh_ratio = "+ wh_ratio +";";
    chrome.tabs.executeScript(tabId, {code: options});
}

chrome.tabs.onUpdated.addListener(loadOptions);
复制代码

监听tabs.onUpdated事件，将配置选项组成一段code，传到当前Tab页中。临时想到的办法，不知道有没有更标准的做法。　　

最后在imageGallery.js里面根据图片的宽度和高度来过滤：

$("img").each(function(){
    /* filter small image */
    if (this.width > min_width &&
        this.height > min_height &&
    (this.width /this.height) < wh_ratio &&
    (this.height /this.width) < wh_ratio) {
        $("#img_Gallery").append($(this));
    }
});
复制代码

感受

Chrome扩展的开发基本和网页开发一致，入门门槛还是很低的，也能利用到现有的很多js库，简单研究下就可以做出很实用的扩展。

大家下载这个扩展试试，有兴趣可以交流下。（Download/下载）

http://www.cnblogs.com/Lvkun/archive/2011/09/17/imageGallery_log.html

你可能感兴趣的:(chrome扩展)

  • 分享一个用于免费取名chrome插件 blogcs chrome前端
    这是一个帮助父母为宝宝取名的Chrome扩展程序，基于八字命理为宝宝打造独特且富有寓意的名字。功能特点：-支持输入宝宝姓氏。-可选择宝宝性别（男宝宝/女宝宝）。-可选择名字长度（二字名/三字名）。-支持输入出生日期和时辰。-提供多种期望寓意选择。-支持自定义期望寓意。-完全简体中文界面。安装方式：**从Chrome网上应用店安装**：1.Chrome網上應用店頁面。2.点击“添加至Chrome”按
  • 分享一个使用的音频裁剪chrome扩展-Ringtone Maker blogcs 音视频chrome前端
    一、插件简介铃声制作器是一个简单易用的Chrome扩展，专门用于制作手机铃声。它支持裁剪音频文件的特定片段，并将其下载为WAV格式，方便我们在手机上使用。无论是想从一段长音频中截取精彩部分作为铃声，还是对现有的音频进行个性化剪辑，这个插件都能轻松满足你的需求二、安装方法安装这个插件非常方便，有两种方式可供选择：1.从Chrome网上应用店安装访问Chrome网上应用店页面。点击“添加到Chrome
  • Speechify: 在线文本转语音（TTS）网站 Mr.长安 AIGC产品合集人工智能语音识别
    【产品介绍】Speechify是一个基于人工智能技术的在线文本转语音（TTS）网站，可以让用户把任何文本转换成自然流畅的语音，从而提高阅读效率和理解能力。Speechify有多种平台的应用，包括Chrome扩展、iOS应用、Android应用和Mac应用，可以在不同的设备上使用Speechify来听取文档、文章、PDF、电子邮件等任何内容。拥有超过200种标准的AI语音和自然的人声，覆盖了全球50
  • chrome插件模板；使用 React 18 和 Webpack 5 的 Chrome 扩展样板 struggle2025 chromereact.jswebpack
    一、软件介绍（文末提供下载）这是一个基本的Chrome扩展样板，可帮助您编写模块化和现代的Javascript代码，轻松加载CSS，并在代码更改时自动重新加载浏览器。github地址：https://github.com/lxieyang/chrome-extension-boilerplate-react本文信息图片来源于上面GitHub地址二、软件特征ChromeExtensionManife
  • chrome插件：网页图片高清下载 易林示 小工具chrome小程序python
    前置条件：安装有chrome谷歌浏览器的电脑使用步骤：1.打开chrome扩展插件2.点击管理扩展程序3.加载已解压的扩展程序4.选择对应文件夹5.成功后会出现一个扩展小程序6.点击对应小程序7.输入需要访问的网址，点击扩展插件即可进行图片下载
  • Chrome插件：图片缩放为头像（128*128） 易林示 小工具chrome前端
    前置条件：安装有chrome谷歌浏览器的电脑使用步骤：1.打开chrome扩展插件2.点击管理扩展程序3.加载已解压的扩展程序4.选择对应文件夹5.成功后会出现一个扩展小程序6.点击对应小程序7.使用小程序8.拖拽成功后会自动保存到下载代码：1.manifest.json{"manifest_version":3,"name":"图片缩放器","version":"1.0","descriptio
  • Chrome 插件备份, 从浏览器打包扩展程序为 crx 文件 Mruping
    虽然Chrome支持扩展程序同步,但易因误操作而覆盖网络备份(Google服务对大陆也不友好)。本文通过导出Chrome扩展程序为crx文件,而实现Chrome扩展程序本地备份。30s总结通过扩展程序找到其根目录；在扩展程序界面打包扩展程序为crx文件；目的Chrome扩展程序本地备份Chrome扩展程序分享方案导出Chrome扩展程序为crx文件。步骤1.找到扩展程序根目录①地址栏输入chrom
  • chrome扩展程序本地打包 丿似锦 Googlechrome前端
    简介本文为Chrome浏览器已安装的扩展程序打包为离线.crx文件，便于在无法访问Chrome商店场景下使用扩展管理页面chrome://extensions/确定自己需要打包的扩展程序ID找到扩展程序路径chrome默认完整路径查看方法chrome://version/其中【个人资料路径】下的Extensions文件夹就是扩展程序安装目录根据查询的扩展程序ID选择打包扩展程序在扩展管理页面点击【
  • Chrome浏览器安装.crx格式扩展程序 人间小美味695 #插件类#浏览器chrome扩展程序.crx浏览器应用商店
    目录内容介绍一、chrome网上应用商店搜索扩展程序二、非Chrome应用商店来源的扩展程序内容介绍Chrome扩展程序为.crx后缀，主要分为chrome网上应用商店搜索扩展程序和非Chrome应用商店来源的扩展程序。支持功能：一、chrome网上应用商店搜索扩展程序Chrome网上应用商店搜索扩展程序点击查看详情添加至Chrome——添加扩展程序二、非Chrome应用商店来源的扩展程序将.cr
  • chrome扩展，“manifest_version“: 3, chrome 扩展图标点击事件 徐同保 chrome前端
    在Chrome扩展中，从ManifestV3开始，后台脚本（backgroundscripts）被服务工作线程（serviceworkers）所取代。这改变了扩展图标点击事件（通常称为浏览器操作或者页面操作）的处理方式。在ManifestV3中，您需要使用chrome.action.onClicked监听器来处理扩展图标的点击事件。下面是一个如何设置扩展图标点击事件处理器的示例：在manifest
  • 开发chrome扩展（ 禁止指定域名使用插件） 徐同保 chrome前端
    mainfest.json:{"manifest_version":3,"name":"ChatGPT学习","version":"0.0.2","description":"ChatGPT,GPT-4,Claude3,Midjourney,StableDiffusion,AI,人工智能,AI","icons":{"16":"./images/logo.png","48":"./images/lo
  • chrome扩展运行linux,微软 Chromium 版 Edge 浏览器 Linux 版首次亮相 支持Chrome扩展 都不叫阿布呢 chrome扩展运行linux
    微软于今年1月份推出的经过改进的Chromium版Edge浏览器已进入Linux操作系统，并有望在今年晚些时候在开源平台上发布。Chromium版Edge广受好评，现已在Windows和macOS系统上提供。微软最近确认Linux版本也正在运行开发。微软计划到2020年底在所有主要的台式机和移动操作系统上提供Edge浏览器。去年，Edge开发团队还对Web开发人员进行了一项调查，以征询他们对Lin
  • Chrome 使用及插件资源 独木舟的木
    插件资源站点Crx4Chrome想下载Chrome扩展程序？但是Chrome应用商店又打不开。去这个站点下载。GreasyFork-安全、有用的用户脚本大全在Chrome上安装了一个叫Tampermonkey的脚本管理器之后，需要下载脚本，去这个站点。使用技巧不喜欢某个网站的样子？用Stylish给它一键「换肤」用Chrome的人都需要知道的「神器」扩展：「油猴」使用详解值得推荐的油猴脚本，全方位
  • chrome扩展插件常用文件及作用 ALGORITHM LOL chrome前端
    Chrome扩展通常包含以下常用文件及其作用：manifest.json：描述了扩展的基本信息，如名称、版本、权限、图标等。定义了扩展的各种组件和功能，包括后台脚本、内容脚本、页面、浏览器动作按钮等。background.js：后台脚本文件，可以用来监听浏览器事件、与内容脚本通信、管理扩展的生命周期等。可以用来执行扩展的后台任务，如处理异步操作、与服务器通信等。contentscripts（内容脚
  • Chrome扩展开发纪要 AriFe. 杂学chrome前端chrome插件chrome扩展crx
    1.开发人员模式以Edge(Chromium)为例,可在管理扩展页,在左侧开发人员模式打开,只有此项开启后才能加载未压缩的扩展,虽然也可以打包扩展,但是浏览器会检测,未上线的crx包是无法被安装的.所以不打算上架的crx只能使用加载解压缩的扩展安装2.创建扩展2.1建立文件夹mycrx2.2创建manifest.json{"manifest_version":3,//扩展版本,现在只能用3"nam
  • 用Chrome，Edge，360等浏览器如何调用底层硬件模块？ 非也2024 政务浏览器chromeedge前端驱动开发计算机外设
    通常情况下，各种标准浏览器无法调用底层硬件外设模块，如指纹仪，身份证读卡器等；需要软件厂商开发Chrome扩展，或者相关插件，这种开发工作门槛较高，维护这样一个开发团队成本也高，不划算。力麒集团的“政务浏览器”产品提供了一个简洁易用的方案。政务浏览器启动后，可以以“中间件”模式运行；该模式下浏览器在后台运行，将硬件模块的接口暴露成Http调用，也可以将模块调用以悬浮的工具栏呈现。具体设置及调用方法
  • 《GitZip for github》从Github批量下载表情包 zhaoolee
    最近我创建了一个关于表情包的github仓库,里面收录了国人常用的表情包,并可以在线预览表情包https://zhaoolee.github.io/ChineseBQB/仓库地址:https://github.com/zhaoolee/ChineseBQB后面发现下载单个文件夹的表情包并不方便,于是找到了Chrome扩展程序GitZipforgithub来解决问题如果遇到无法下载的问题,可以尝试将
  • vue调试工具谷歌google插件vue-devtools的安装 菠菜_yinbocai
    1、下载chrome扩展插件https://github.com/vuejs/vue-devtools2、解压下载好的文件，进入到vue-devtools目录，安装项目所需要的依赖包。安装方法：npminstall或者cnpminstall（注：cnpm命令是国内的镜像，速度会快一些）3、编译项目文件。编译方法：npmrunbuild第四步：修改安装目录vue-devtools\shells\ch
  • 写代码的调试工具和断点调试debugger 如果决定要走又何必挽留 工具类vue.js前端javascript
    我们都知道Vue是一个响应式的，视图驱动数据,数据驱动视图,如何直观的看到Vue组件里面的值呢？极简插件_Chrome扩展插件商店_优质crx应用下载(zzzmh.cn)一.Vue.jsdevtools1.可以在上面的极简插件的网址里面进行下载。2.拖拽选择管理扩展程序,将下载好的插件拖入进来就可以看见了。3.调试(1）数据驱动视图视图驱动数据(2)具有父子关系的组件任然能看到数据二.debugg
  • Google Chrome谷歌浏览器安装Vue插件vue-devtools 是酸奶呀zZ chromevue.js前端
    本方式无须使用魔法，速度极快！超容易上手！一、百度搜索“极简插件”具体网址为极简插件_Chrome扩展插件商店_优质crx应用下载随后在搜索按钮里搜索vue得到下图结果并点击二、下载vue.jsDevtools这里我们选择推荐下载。下载好并解压后可以有以下两个文件三、安装说明书相关内容极简插件官网：https://chrome.zzzmh.cn插件安装教程：https://chrome.zzzmh
  • vue-devtools插件下载、安装 Tloml2019 vue.js前端javascript
    1、进入极简插件网站极简插件_Chrome扩展插件商店_优质crx应用下载(zzzmh.cn)2、搜索VueDevtools3、点击推荐下载4、解压得到以下文件5、打开Chrome，点击右上角三个点→扩展程序→管理扩展程序6、打开右上角开发者模式7、把刚才解压的文件【nhdogjmejiglipccpnnnanhbledajbpd_6.5.1_chrome.zzzmh.cn.crx】拖进来8、添加
  • 自动验证码解析器：CapSolver的Chrome扩展程序自动解析器 ForRunner123 chrome前端机器学习人工智能
    自动验证码解析器：CapSolver的Chrome扩展程序自动解析器验证码是网站实施的一种安全措施，通常对用户构成挑战。然而，随着技术的进步，验证码解析器已经出现，以简化这一过程。在本文中，我们将探讨专为GoogleChrome用户设计的自动验证码解析器-CapSolver自动解析器扩展的好处。我们将讨论其特点、解决验证码的便利性以及如何下载这个免费的验证码解析器扩展。需要验证码解析器的原因：验证
  • 五星好评的Chrome扩展：给你Kindle般的纯净阅读享受 2a065911bcb7
    在开始今天的内容之前，我们先来看一组对比：这是我们平时用浏览器看新闻、文章的时候，页面周围总是许多广告和其他新闻链接，总感觉有好多花花绿绿的在向朕抛媚眼，弄得朕看个折子都心猿意马的，老想着翻牌子的事。。。现在把它施一下魔法，还是同一个网页，怎么样，大不同吧？就像我们用Kindle看书一样，字体和间距变得大了一点，看着更舒服了，页面除了文字之外再没有乱七八糟的链接、按钮，更加纯粹、干净。嗯，就像那句
  • Chrome扩展之通信 程序员-小许 chromephp前端
    Chrome扩展通信chrome扩展的5种jsjs类型介绍popup单击插件图标后的弹窗中的js，由于单击图标打开popup，焦点离开又立即关闭，生命周期一般很短。content-script与页面共享DOM，但是不共享JS，可访问部分chrome扩展API。background权限最高，几乎可调用所有Chrome扩展API（除了devTools），且可以无限制跨域。生命周期最长，跟随浏览器开关。
  • 使用Element-Plus 加载style wyg_031113 javascriptelementui
    vue-chrome-extension简介chrome扩展开发插件基于vue3、ts、ElementPlus、Webpack5、axios、less开发支持content快速调用chrome对象及axios详看pages/content/app.vue开箱即用chrome插件特性基础框架：使用Vue3/ElementPlusTypeScript:应用程序级JavaScript的语言安装使用获取项
  • 适用于Web开发工作流的10个顶级Chrome扩展程序 phpCN中文网
    作为Web开发人员，我们在一个节奏非常快的行业中工作，并且始终掌握最新信息有时是一个挑战。这就是为什么我相信我们应该充分利用我们所拥有的一切工具来帮助我们保持头脑清醒。今天，将介绍十个Chrome扩展，它们旨在优化您的Web开发工作流，希望能让您的工作效率提高一点。什么是Chrome扩展程序？可以在Chrome的开发人员门户网站上阅读，扩展是一些小软件程序，可以定制你的浏览体验。这可以是任何东西，
  • 自定义chrome.devtools.network的Chrome插件 每天看一遍，防止恋爱&&堕落 数据获取chrome插件chrome.network
    文章目录本文要实现的内容chrome扩展(即插件)简介学习Chrome插件开发有什么意义为什么是Chrome插件而不是Firefox插件了解chrome插件什么是chrome插件扩展怎样开始chrome插件开发测试开始使用chrome插件功能打开chrome的开发者模式写插件前的准备插件的功能如下新建文件夹chrome在chrome中安装插件测试功能开发插件完成功能与上个例子的不同得到网络请求控制
  • 十分钟带你入门Chrome插件开发 River_何 chromejavascript前端
    一、简述我们所说的chrome插件一般都是指chrome扩展程序（ChromeExtension）。chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的文件。chrome插件除了Chrome浏览器之外，还可以运行在所有webkit内核的国产浏览器，比如360极速浏览器、360安全浏览器、搜狗浏览器、QQ浏览器等
  • 推荐给前端程序员的5款浏览器插件 孜孜孜孜不倦 前端
    所谓“工欲善其事，必先利其器”。Chrome（谷歌浏览器）应该是程序员或者互联网行业人员使用最多的浏览器了。而在日常开发中，下面几款浏览器扩展也许能让你的开发工作事半功倍。1、Vimiumvimium是一个旨在将你的双手从鼠标上解放的Chrome扩展。就使用体验来说，和vim具有相同的丝滑体验。让你不用鼠标，只用键盘，就可以操纵浏览器。为用户提供了类似Vim编辑器的键盘导航和操作方式，大大提升了浏
  • 杂记：使用 mac 和 windows 以及编辑器的总结 yuluo_YX Linux问题的解决方案Macmacos编辑器vim快捷键插件
    Chrome扩展Grammarly语法检查DMIntegrationModuleidm下载扩展JSONFormatterjson格式化查看uBlockOriginAdblock油猴任意网站都可以使用的脚本管理工具Mac快捷键整理截图到剪贴板shift+command+control+4(不按shift存储为文件)切换输入法：control+空格切换到上一个输入法应用之间切换：command+tab
  • 如何用ruby来写hadoop的mapreduce并生成jar包 wudixiaotie mapreduce
    ruby来写hadoop的mapreduce，我用的方法是rubydoop。怎么配置环境呢： 1.安装rvm：     不说了 网上有 2.安装ruby：     由于我以前是做ruby的，所以习惯性的先安装了ruby，起码调试起来比jruby快多了。 3.安装jruby：     rvm install jruby然后等待安
  • java编程思想 -- 访问控制权限 百合不是茶 java访问控制权限单例模式
    访问权限是java中一个比较中要的知识点,它规定者什么方法可以访问,什么不可以访问   一:包访问权限;   自定义包: package com.wj.control; //包 public class Demo { //定义一个无参的方法 public void DemoPackage(){ System.out.println("调用
  • [生物与医学]请审慎食用小龙虾 comsci 生物
         现在的餐馆里面出售的小龙虾,有一些是在野外捕捉的,这些小龙虾身体里面可能带有某些病毒和细菌,人食用以后可能会导致一些疾病,严重的甚至会死亡.....      所以,参加聚餐的时候,最好不要点小龙虾...就吃养殖的猪肉,牛肉,羊肉和鱼,等动物蛋白质     
  • org.apache.jasper.JasperException: Unable to compile class for JSP: 商人shang maven2.2jdk1.8
    环境： jdk1.8    maven  tomcat7-maven-plugin  2.0 原因： tomcat7-maven-plugin  2.0 不知吃 jdk 1.8，换成 tomcat7-maven-plugin  2.2就行，即     <plugin>
  • 你的垃圾你处理掉了吗?GC oloz GC
    前序:本人菜鸟，此文研究学习来自网络，各位牛牛多指教　 1.垃圾收集算法的核心思想 　　Java语言建立了垃圾收集机制，用以跟踪正在使用的对象和发现并回收不再使用(引用)的对象。该机制可以有效防范动态内存分配中可能发生的两个危险：因内存垃圾过多而引发的内存耗尽，以及不恰当的内存释放所造成的内存非法引用。 　　垃圾收集算法的核心思想是：对虚拟机可用内存空间，即堆空间中的对象进行识别
  • shiro 和 SESSSION 杨白白 shiro
    shiro 在web项目里默认使用的是web容器提供的session，也就是说shiro使用的session是web容器产生的，并不是自己产生的，在用于非web环境时可用其他来源代替。在web工程启动的时候它就和容器绑定在了一起，这是通过web.xml里面的shiroFilter实现的。通过session.getSession()方法会在浏览器cokkice产生JESSIONID，当关闭浏览器，此
  • 移动互联网终端 淘宝客如何实现盈利 小桔子 移動客戶端淘客淘寶App
           2012年淘宝联盟平台为站长和淘宝客带来的分成收入突破30亿元，同比增长100%。而来自移动端的分成达1亿元，其中美丽说、蘑菇街、果库、口袋购物等App运营商分成近5000万元。 可以看出，虽然目前阶段PC端对于淘客而言仍旧是盈利的大头，但移动端已经呈现出爆发之势。而且这个势头将随着智能终端(手机，平板)的加速普及而更加迅猛
  • wordpress小工具制作 aichenglong wordpress小工具
    wordpress 使用侧边栏的小工具，很方便调整页面结构 小工具的制作过程 1 在自己的主题文件中新建一个文件夹(如widget)，在文件夹中创建一个php(AWP_posts-category.php) 小工具是一个类,想侧边栏一样，还得使用代码注册，他才可以再后台使用，基本的代码一层不变 <?php class AWP_Post_Category extends WP_Wi
  • JS微信分享 AILIKES js
    // 所有功能必须包含在 WeixinApi.ready 中进行    WeixinApi.ready(function(Api) {        // 微信分享的数据            var wxData = {       &nb
  • 封装探讨 百合不是茶 JAVA面向对象 封装
    //封装   属性 方法 将某些东西包装在一起，通过创建对象或使用静态的方法来调用，称为封装；封装其实就是有选择性地公开或隐藏某些信息，它解决了数据的安全性问题，增加代码的可读性和可维护性   在 Aname类中申明三个属性，将其封装在一个类中：通过对象来调用   例如   1： //属性 将其设为私有 姓名 name 可以公开
  • jquery radio/checkbox change事件不能触发的问题 bijian1013 JavaScriptjquery
    我想让radio来控制当前我选择的是机动车还是特种车，如下所示：  <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><
  • AngularJS中安全性措施 bijian1013 JavaScriptAngularJS安全性XSRFJSON漏洞
            在使用web应用中，安全性是应该首要考虑的一个问题。AngularJS提供了一些辅助机制，用来防护来自两个常见攻击方向的网络攻击。 一.JSON漏洞         当使用一个GET请求获取JSON数组信息的时候（尤其是当这一信息非常敏感，
  • [Maven学习笔记九]Maven发布web项目 bit1129 maven
    基于Maven的web项目的标准项目结构 user-project     user-core     user-service     user-web        src      
  • 【Hive七】Hive用户自定义聚合函数(UDAF) bit1129 hive
    用户自定义聚合函数，用户提供的多个入参通过聚合计算(求和、求最大值、求最小值)得到一个聚合计算结果的函数。 问题：UDF也可以提供输入多个参数然后输出一个结果的运算，比如加法运算add(3，5)，add这个UDF需要实现UDF的evaluate方法,那么UDF和UDAF的实质分别究竟是什么？   Double evaluate(Double a, Double b)  
  • 通过 nginx-lua 给 Nginx 增加 OAuth 支持 ronin47
    前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGeek 在过去几年中取得了发展，我们已经积累了不少针对各种任务的不同管理接口。我们通常为新的展示需求创建新模块，比如我们自己的博客、图表等。我们还定期开发内部工具来处理诸如部署、可视化操作及事件处理等事务。在处理这些事务中，我们使用了几个不同的接口来认证： &n
  • 利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法 bsr1983 session
    在利用tomcat-redis-session-manager做session同步时，遇到了在session保存一个自定义对象时，修改该对象中的某个属性，session未进行序列化，属性没有被存储到redis中。 在 tomcat-redis-session-manager的github上有如下说明： Session Change Tracking As noted in the &qu
  • 《代码大全》表驱动法-Table Driven Approach-1 bylijinnan java算法
    关于Table Driven Approach的一篇非常好的文章： http://www.codeproject.com/Articles/42732/Table-driven-Approach package com.ljn.base; import java.util.Random; public class TableDriven { public
  • Sybase封锁原理 chicony Sybase
           昨天在操作Sybase IQ12.7时意外操作造成了数据库表锁定，不能删除被锁定表数据也不能往其中写入数据。由于着急往该表抽入数据，因此立马着手解决该表的解锁问题。     无奈此前没有接触过Sybase IQ12.7这套数据库产品，加之当时已属于下班时间无法求助于支持人员支持，因此只有借助搜索引擎强大的
  • java异常处理机制 CrazyMizzz java
    java异常关键字有以下几个，分别为 try catch final throw throws 他们的定义分别为 try：    Opening exception-handling statement. catch：  Captures the exception. finally： Runs its code before terminating
  • hive 数据插入DML语法汇总 daizj hiveDML数据插入
    Hive的数据插入DML语法汇总1、Loading files into tables语法：1) LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1=val1, partcol2=val2 ...)]解释：1)、上面命令执行环境为hive客户端环境下： hive>l
  • 工厂设计模式 dcj3sjt126com 设计模式
      使用设计模式是促进最佳实践和良好设计的好办法。设计模式可以提供针对常见的编程问题的灵活的解决方案。 工厂模式 工厂模式（Factory）允许你在代码执行时实例化对象。它之所以被称为工厂模式是因为它负责“生产”对象。工厂方法的参数是你要生成的对象对应的类名称。 Example #1 调用工厂方法（带参数） <?phpclass Example{ 
  • mysql字符串查找函数 dcj3sjt126com mysql
      FIND_IN_SET(str,strlist) 假如字符串str 在由N 子链组成的字符串列表strlist 中，则返回值的范围在1到 N 之间。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串，而第二个是type SET列，则   FIND_IN_SET() 函数被优化，使用比特计算。如果str不在strlist 或st
  • jvm内存管理 easterfly jvm
    一、JVM堆内存的划分 分为年轻代和年老代。年轻代又分为三部分：一个eden,两个survivor。 工作过程是这样的：e区空间满了后，执行minor gc，存活下来的对象放入s0, 对s0仍会进行minor gc，存活下来的的对象放入s1中，对s1同样执行minor gc，依旧存活的对象就放入年老代中； 年老代满了之后会执行major gc，这个是stop the word模式，执行
  • CentOS-6.3安装配置JDK-8 gengzg centos
    JAVA_HOME=/usr/java/jdk1.8.0_45 JRE_HOME=/usr/java/jdk1.8.0_45/jre PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib export JAVA_HOME
  • 【转】关于web路径的获取方法 huangyc1210 Web路径
    假定你的web application 名称为news,你在浏览器中输入请求路径：  http://localhost:8080/news/main/list.jsp  则执行下面向行代码后打印出如下结果：  1、 System.out.println(request.getContextPath()); //可返回站点的根路径。也就是项
  • php里获取第一个中文首字母并排序 远去的渡口 数据结构PHP
    很久没来更新博客了，还是觉得工作需要多总结的好。今天来更新一个自己认为比较有成就的问题吧。 最近在做储值结算，需求里结算首页需要按门店的首字母A-Z排序。我的数据结构原本是这样的： Array ( [0] => Array ( [sid] => 2885842 [recetcstoredpay] =&g
  • java内部类 hm4123660 java内部类匿名内部类成员内部类方法内部类
         　在Java中，可以将一个类定义在另一个类里面或者一个方法里面，这样的类称为内部类。内部类仍然是一个独立的类，在编译之后内部类会被编译成独立的.class文件，但是前面冠以外部类的类名和$符号。内部类可以间接解决多继承问题,可以使用内部类继承一个类，外部类继承一个类，实现多继承。      &nb
  • Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten zhb8015
    maven pom.xml关于hibernate的配置和异常信息如下，查了好多资料，问题还是没有解决。只知道是包冲突，就是不知道是哪个包....遇到这个问题的分享下是怎么解决的。。   maven pom:   <dependency> <groupId>org.hibernate</groupId> <ar
  • Spark 性能相关参数配置详解－任务调度篇 Stark_Summer sparkcachecpu任务调度yarn
    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。   由于篇幅较长，所以在这里分篇组织，如果要看最新完整的网页版内容，可以戳这里：http://spark-config.readthedocs.org/，主要是便
  • css3滤镜 wangkeheng htmlcss
    经常看到一些网站的底部有一些灰色的图标，鼠标移入的时候会变亮，开始以为是js操作src或者bg呢，搜索了一下，发现了一个更好的方法：通过css3的滤镜方法。 html代码： <a href='' class='icon'><img src='utv.jpg' /></a> css代码： .icon{-webkit-filter: graysc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他