美文网首页
chrome插件开发demo

chrome插件开发demo

作者: timar | 来源:发表于2019-11-19 17:12 被阅读0次

一个码云自动代码检视的插件,当然用httpclient也能做
插件整体结构
打开chrome的开发者模式即可使用

image.png

manifest.json
插件的基本定义

{
   "background": {
      "page": "background.html"
   },
  // 需要注入的脚本
  "content_scripts": [ {
      "all_frames": true,
      "js": [ "chrome-state-manager.js" ],
      "matches": [ "http://mayun.kkkkkkk.cn/**/commits/master", "http://mayun.kkkkkkkk.cn/LS_JCYW_TEAM1/**/commit/**" ],
      "run_at": "document_end"
   } ],
   "description": "码云自动commit",
  // 插件图标
   "icons": {
      "128": "axurerp-128.png",
      "48": "axurerp-48.png"
   },
    "manifest_version": 2,
   "name": "my plugin Extension for Chrome",
   "page_action": {
      "default_icon": "axurerp-16.png"
   },
  // 需要进行跨域访问的地址
   "permissions": [ "tabs" ],
  // 插件更新地址
   "update_url": "https://clients2.google.com/service/update2/crx",
   "version": "0.0.1"
}

background.html

<html>
<head>
<script type="text/javascript"></script>
</head>
<body></body>
</html>

chrome-state-manager.js
具体的逻辑

(function() {
    // commit列表页
    var regex1 = new RegExp('.*/LS_JCYW_TEAM1/.*commits/master');
    // 审批详情页
    var regex2 = new RegExp('.*/LS_JCYW_TEAM1/.*commit/.*');
    
    function init() {
        var url = window.location.href;
        // 审批列表页
        if (regex1.test(url)){ 
            // 所有没有审批的提交
            var greyElemnts = document.getElementsByClassName('grey');
            if (greyElemnts.length > 0) {
                // 获取父级div
                var commitDivParent = greyElemnts[0].parentNode;
                // 跳转审批详情页的a标签
                var aTag = commitDivParent.getElementsByClassName("commit_short_id")[0];
                // 触发点击事件
                aTag.click();
            }
        // 审批详情页,并且页面是未审批状态
        } else if (regex2.test(url) && document.getElementsByClassName('grey').length > 0) {
            // 审批通过按钮
            var _btn = document.getElementById('codereview_complete');
            // 去掉disabled样式。这里原来是 class = "...... disabled",并不是<button class="...." disabled="true"/> 
            _btn.classList.remove('disabled');
            // 触发点击事件
            _btn.click();
            // 返回上一页并刷新
            window.location.href=document.referrer;
        }
    }
    // var interval1 = setInterval(init, 1000)
    init();
})();

相关文章

  • chrome插件开发demo

    一个码云自动代码检视的插件,当然用httpclient也能做插件整体结构打开chrome的开发者模式即可使用 ma...

  • Chrome 扩展插件开发DEMO

    任务背景 工作中常用到一些小工具,而网上现成的在线工具用起来不爽,于是想通过自己实现一些 Chrome 扩展插件来...

  • Mac下导出chrome插件

    Mac下导出chrome插件Chrome Extensions 插件扩展程序开发入门mac 下chrome扩展插件...

  • Chrome插件开发

    Chrome插件开发

  • Chrome插件开发快速入门

    前言 周末学习了下Chrome插件的开发,总体来说入门还是比较容易的,动手配合一些demo就能了解基本的开发过程。...

  • 开发笔记

    最近做rails开发。 1 chrome 插件 postman这个chrome插件,用来调试api还是颇为方便的。...

  • 技术开发中好用的chrome插件

    今天的主要推荐技术开发用的Chrome插件,对做技术开发的朋友很有帮助,用了这些chrome插件,开发效率可以得到...

  • react-native Expo 下载

    reactNative开发工具 Expo自行下载:Chrome插件下载(需要梯子翻墙)1、下载Chrome插件AP...

  • Chrome扩展开发

    Chrome扩展开发 标签(空格分隔): Chrome扩展 1、写在前面 Chrome插件是一个用Web技术开发...

  • 5分钟开始你的Chrome插件开发

    快速了解 & 直接下载上手开发 1、什么是Chrome插件 Chrome插件通常是.crx后缀的文件;通过谷歌网上...

网友评论

      本文标题:chrome插件开发demo

      本文链接:https://www.haomeiwen.com/subject/fqkgictx.html