Tagged: javascript

浏览器扩展之用户脚本

用户脚本是什么？

用户脚本是一段代码，它们能够优化您的网页浏览体验。安装之后，有些脚本能为网站添加新的功能，有些能使网站的界面更加易用，有些则能隐藏网站上烦人的部分内容。

吐槽

百度这个东西啊，不用呢，貌似谷歌又要翻墙。用呢，搜索不到好用的！

之前一直也用过油猴，但不是很简洁，今天突然发现一个扩展工具-暴力猴。界面简介清爽，也支持https://greasyfork.org/zh-CN/的脚本。

暴力猴是什么

简单来说，暴力猴就是一个Chrome上面的用户脚本管理器。它是一个开源的用户脚本管理器。

哪里能找到需要的脚本

Odoo Javascript & Widget

定义一个OdooClass 

odoo.define('addon_name.service', function (require) {
    "use strict";
    var utils = require('web.utils');
    var Model = require('web.Model');

    // do things with utils and Model
    var something_useful = 15;
    return  {
        something_useful: something_useful,
    };
});

重写记录打开方式 

odoo.define('combined_statements.working_papers', function(require) {
    "use strict";
	var core = require('web.core');
	var ListView = require('web.ListView');
	var utils = require('web.utils');
	var web_client = require('web.web_client');
	var Model = require('web.Model');

	var QWeb = core.qweb;
	var _t = core._t;

	/**
	 * 打开工作底稿创建向导页面
	 */
	function open_wording_papers_wizard_action() {
		web_client.action_manager.do_action({
			name: "底稿定义",
			type: "ir.actions.act_window",
			res_model: "working.papers.define.wizard",
			target: 'new',
			xml_id: 'combined_statements.working_papers_define_wizard_form',
			views: [
                [
                    false, 'form'
                ]
            ]
        });
    }

	ListView.include({
        // 为增加按钮绑定点击事件
		render_buttons: function($node) {
			let add_button = false;
			if (!this.$buttons) {
				add_button = true;
            }

			this._super.apply(this, arguments);

			if (add_button) {
				this.$buttons.on('click', '.o_button_open', open_wording_papers_wizard_action.bind(this));
            }
        },
        // 重写Tree视图点击行打开记录的方式
		do_activate_record: function(index, id, dataset, view) {
			if (this.model === 'combined.statements.working.paper') {
				let record = this.records.get(id);
				this.do_action({
					type: "ir.actions.client",
					tag: 'working.papers',
					params: record,
                });
            }else {
				this._super.apply(this, arguments);
            }
        }
    });
});

WordPress 打造自己的代码高亮

代码高亮对于程序员写博客来说，还是非常有必要的，毕竟你写个文章贴个代码看起来乱七八糟，也不好看！

博客写了好多年了，贴的代码也不少，之前一直使用的插件，总感觉有点过重了，为了一个代码高亮引入了太多JS、CSS。

所以就打算自己打造一个，这个是基于 highlight.js 来打造的！其中使用了一个滚动条的美化JS jquery.mCustomScrollbar.min.js

引入需要文件

将文件引入主题的 functions.php

// functions.php
function register_scripts() {
	wp_register_script('highlight', get_template_directory_uri(). '/extend/highlight.min.js', array('jquery'), '9.12.0', true);
	wp_register_script('mousewheel', get_template_directory_uri(). '/extend/jquery.mousewheel.min.js', array('jquery'), '3.1.13', true);
	wp_register_script('mCustomScrollbar', get_template_directory_uri(). '/extend/jquery.mCustomScrollbar.min.js', array('jquery','mousewheel'), '3.1.5', true);
	wp_register_script('extend', get_template_directory_uri(). '/extend/custom.js', array('jquery','highlight'), '1.0', true);
}
add_action('init','register_scripts');

function register_styles() {
	wp_register_style('highlight', get_template_directory_uri(). '/extend/highlight.css', null, '9.12.0', 'all');
	wp_register_style('mCustomScrollbar', get_template_directory_uri(). '/extend/jquery.mCustomScrollbar.min.css', null, '3.1.5', 'all');
	wp_register_style('extend', get_template_directory_uri(). '/extend/custom.css', null, '1.0', 'all');
}
add_action('init',register_styles);

function load_scripts() {
	wp_enqueue_script('highlight');
	wp_enqueue_script('mousewheel');
	wp_enqueue_script('mCustomScrollbar');
	wp_enqueue_script('extend');
}
add_action( 'the_post', 'load_scripts');

function load_styles() {
	wp_enqueue_style('highlight');
	wp_enqueue_style('extend');
	wp_enqueue_style('mCustomScrollbar');
}
add_action( 'the_post', 'load_styles' );

注册按钮

// functions.php
add_action('admin_head', 'highlight_code_plugin');
function highlight_code_plugin() {

	global $typenow;

	// 判断用户是否有编辑文章和页面的权限
	if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
		return;
	}

	if (! in_array($typenow, array('post','page'))) {
		return;
	}

	//判断用户是否使用可视化编辑器     
	if ( get_user_option('rich_editing') == 'true' ) {
		add_filter( 'mce_external_plugins', 'add_plugin' );
		add_filter( 'mce_buttons', 'register_button' );
	}
}

// 注册按钮
function register_button($buttons) {
	array_push($buttons, 'highlight_code');
	return $buttons;
}

// 注册TinyMCE按钮插件
function add_plugin($plugin_array) {
	$plugin_array['highlight_code'] = get_template_directory_uri() . '/extend/mce_code_plugin.js';
	return $plugin_array;
}

添加tinyMCE编辑按钮功能

// mce_code_plugin.js
(function($) {
	tinymce.PluginManager.add('highlight_code', function(editor, url) {
		editor.addButton('highlight_code', {
			// text: 'Code',
			// icon: false,
			title: 'Highlight Code',
			icon: 'wp_code',
			onclick: function() {
				// Examlpes: https://www.tinymce.com/docs/api/tinymce/tinymce.windowmanager/
				editor.windowManager.open({
					width: 780,
					height: 650,
					title: 'Insert Code',
					body: [{
						type: 'listbox',
						name: 'code_type',
						label: 'Code Type',
						'values': [{
							text: 'Java',
							value: 'java'
						}, {
							text: 'Python',
							value: 'python'
						}, {
							text: 'Bash',
							value: 'bash'
						}, {
							text: 'Shell',
							value: 'shell'
						}, {
							text: 'Php',
							value: 'php'
						}, {
							text: 'Sql',
							value: 'sql'
						}, {
							text: 'JavaScript',
							value: 'javascript'
						}, {
							text: 'Json',
							value: 'json'
						}, {
							text: 'Xml',
							value: 'xml'
						}, {
							text: 'Css',
							value: 'css'
						}, {
							text: 'Diff',
							value: 'diff'
						}]
					}, {
						type: 'textbox',
						name: 'body',
						multiline: true,
						minWidth: 650,
						minHeight: 580
						// label: 'Body'
					}],
					onsubmit: function(e) {
						// Insert content when the window form is submitted
						// Examlpes:
						// tinyMCE.editors[0].insertContent('asdasd')

						// https://www.tinymce.com/docs/api/tinymce.html/tinymce.html.entities/#encoderaw
						// tinymce.html.Entities.encodeRaw(e.data.body) 格式化html标签
						editor.insertContent('<pre class="' + e.data.code_type + '"><code>' + tinymce.html.Entities.encodeRaw(e.data.body) + '</code></pre>');
					}
				});
			}
		});

		return {
			getMetadata: function() {
				return {
					title: "Highlight Code plugin",
					url: "https://jalena.bcsytv.com"
				};
			}
		};

	})
})(jQuery);

添加hljs初始化

// custom.js
jQuery(document).ready(function($) {

	$('pre code').each(function(i, block) {
		hljs.highlightBlock(block);
	});

	$(".hljs").mCustomScrollbar({
		theme: "light-thin",
		axis: "x",
		autoHideScrollbar: true,
		mouseWheel: {
			axis: "y",
			enable: false
		}
	});
});

到此就完成了。附上一个图片最终的样子吧！

Odoo 引入CSS及JavaScript

在module/view下创建一个新的XML

<?xml version="1.0" encoding="utf-8"?>
<odoo>
        <template id="assets_backend" name="web_kanban assets" inherit_id="web.assets_backend">
            <xpath expr="//script[last()]" position="inside">
                <link rel="stylesheet" href="/web_kanban/static/src/less/kanban_dashboard.less"/>
                <link rel="stylesheet" href="/web_kanban/static/src/less/kanban_view.less"/>

                <script type="text/javascript" src="/web_kanban/static/src/js/kanban_record.js"></script>
                <script type="text/javascript" src="/web_kanban/static/src/js/kanban_relational.js"></script>
                <script type="text/javascript" src="/web_kanban/static/src/js/kanban_quick_create.js"></script>
                <script type="text/javascript" src="/web_kanban/static/src/js/kanban_column.js"></script>
                <script type="text/javascript" src="/web_kanban/static/src/js/kanban_view.js"></script>
                <script type="text/javascript" src="/web_kanban/static/src/js/kanban_widgets.js"></script>
                <script type="text/javascript" src="/web_kanban/static/src/js/compatibility.js"></script>
            </xpath>
        </template>
</odoo>

引入XML至__manifest__.py文件

{
    'data':['views/resources.xml']
}

方法二

直接在__manifest__.py引入

'css': ['static/src/css/sale.css']

VSCode 代码提示

提示文件搜索

Jquery代码提示

rem 进入项目目录执行
npm init -y
npm install --save @types/jquery

引入方式1. 手动引入提示文件

/// <reference path="./node_modules/@types/jquery/index.d.ts" />
$dp.$D('#date091873-')
$dp.$D('date083588-')

引入方式2. 配置文件引入

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "Untitled-1.js",
  "dependencies": {
    "@types/jquery": "^3.2.16"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "types": "./node_modules/@types/jquery/index.d.ts"
}

RETURN HOME

Archives