├── .gitignore ├── .babelrc ├── workspace ├── assets │ ├── images │ │ ├── icon-16.png │ │ ├── icon-19.png │ │ ├── icon-38.png │ │ ├── icon-48.png │ │ └── icon-128.png │ └── scripts │ │ ├── abehiroshize__background.js │ │ └── abehiroshize__content.js └── manifest.json ├── package.json └── gulpfile.babel.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | **/.DS_Store 3 | node_modules/ 4 | npm-debug.log* 5 | dest/ 6 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"], 3 | "plugins": ["transform-object-assign", "transform-object-rest-spread"] 4 | } 5 | -------------------------------------------------------------------------------- /workspace/assets/images/icon-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kyoyababa/abehiroshize/HEAD/workspace/assets/images/icon-16.png -------------------------------------------------------------------------------- /workspace/assets/images/icon-19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kyoyababa/abehiroshize/HEAD/workspace/assets/images/icon-19.png -------------------------------------------------------------------------------- /workspace/assets/images/icon-38.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kyoyababa/abehiroshize/HEAD/workspace/assets/images/icon-38.png -------------------------------------------------------------------------------- /workspace/assets/images/icon-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kyoyababa/abehiroshize/HEAD/workspace/assets/images/icon-48.png -------------------------------------------------------------------------------- /workspace/assets/images/icon-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kyoyababa/abehiroshize/HEAD/workspace/assets/images/icon-128.png -------------------------------------------------------------------------------- /workspace/assets/scripts/abehiroshize__background.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | chrome.browserAction.onClicked.addListener(function(tab) { 4 | chrome.tabs.sendMessage( tab.id, {}, function(msg) {} ); 5 | }); 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "abehiroshize", 3 | "version": "1.0.0", 4 | "description": "Change web page layout as Japanese famous actor Hiroshi Abe's one.", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "start": "gulp start" 8 | }, 9 | "author": "kyoyababa", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "babel-plugin-transform-object-assign": "^6.3.13", 13 | "babel-plugin-transform-object-rest-spread": "^6.3.13", 14 | "babel-preset-es2015": "^6.3.13", 15 | "babelify": "^7.2.0", 16 | "browserify": "^13.0.0", 17 | "bundle": "^0.2.3", 18 | "gulp": "^3.9.1", 19 | "gulp-filter": "^4.0.0", 20 | "gulp-plumber": "^1.1.0", 21 | "jquery": "^3.1.1", 22 | "run-sequence": "^1.2.2", 23 | "vinyl-buffer": "^1.0.0", 24 | "vinyl-source-stream": "^1.1.0", 25 | "watchify": "^3.6.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /workspace/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "abehiroshize", 4 | "description": "Change web page layout as Japanese famous actor Hiroshi Abe's one.", 5 | "version": "1.0.0", 6 | "icons": { 7 | "16": "assets/images/icon-16.png", 8 | "48": "assets/images/icon-48.png", 9 | "128": "assets/images/icon-128.png" 10 | }, 11 | "background": { 12 | "scripts": [ 13 | "assets/scripts/abehiroshize__background.js" 14 | ], 15 | "persistent": false 16 | }, 17 | "browser_action": { 18 | "default_icon": { 19 | "19": "assets/images/icon-19.png", 20 | "38": "assets/images/icon-38.png" 21 | }, 22 | "default_title": "abehiroshize" 23 | }, 24 | "content_scripts": [ 25 | { 26 | "matches": [""], 27 | "js": ["assets/scripts/abehiroshize__content.js"] 28 | } 29 | ], 30 | "permissions": [ 31 | "activeTab" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /gulpfile.babel.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Global node plugins 3 | **/ 4 | import gulp from 'gulp'; 5 | import del from 'del'; 6 | import runSequence from 'run-sequence'; 7 | import buffer from 'vinyl-buffer'; 8 | import source from 'vinyl-source-stream'; 9 | import plumber from 'gulp-plumber'; 10 | 11 | /** 12 | * Assets builder 13 | **/ 14 | import browserify from 'browserify'; 15 | import watch from 'gulp-watch'; 16 | 17 | 18 | /** 19 | * Clean task 20 | **/ 21 | gulp.task('clean', () => { 22 | return del([ 23 | 'dest', 24 | 'publish', 25 | 'npm-debug.log', 26 | '**/.DS_Store', 27 | '**/*.log', 28 | ]); 29 | }); 30 | 31 | 32 | /** 33 | * Browserify builder 34 | **/ 35 | gulp.task('browserify', () => { 36 | browserify({ 37 | entries: ['./workspace/assets/scripts/abehiroshize__background.js'] 38 | }) 39 | .bundle() 40 | .pipe(source('./assets/scripts/abehiroshize__background.js')) 41 | .pipe(buffer()) 42 | .pipe(gulp.dest('./dest')); 43 | 44 | browserify({ 45 | entries: ['./workspace/assets/scripts/abehiroshize__content.js'] 46 | }) 47 | .bundle() 48 | .pipe(source('./assets/scripts/abehiroshize__content.js')) 49 | .pipe(buffer()) 50 | .pipe(gulp.dest('./dest')); 51 | }); 52 | 53 | 54 | /** 55 | * Assets builder 56 | **/ 57 | gulp.task('build', () => { 58 | return runSequence( 59 | ['clean'], 60 | ['browserify'], 61 | ['transport'] 62 | ); 63 | }); 64 | 65 | 66 | /** 67 | * File Transport 68 | **/ 69 | gulp.task('transport', () => { 70 | gulp.src(['./workspace/manifest.json']) 71 | .pipe(gulp.dest('./dest')); 72 | 73 | gulp.src(['./workspace/assets/images/*.png']) 74 | .pipe(gulp.dest('./dest/assets/images')); 75 | }); 76 | 77 | 78 | /** 79 | * Assets watcher 80 | **/ 81 | gulp.task('watch', () => { 82 | watch('./workspace/manifest.json', () => { 83 | return runSequence( 84 | ['transport'] 85 | ) 86 | }); 87 | 88 | watch('./workspace/assets/images/**/*', () => { 89 | return runSequence( 90 | ['transport'] 91 | ) 92 | }); 93 | 94 | watch('./workspace/assets/scripts/**/*.js', () => { 95 | return runSequence( 96 | ['browserify'] 97 | ) 98 | }); 99 | }); 100 | 101 | 102 | /** 103 | * Gulp default task 104 | **/ 105 | gulp.task('default', () => { 106 | throw new Error('Default task is not supported!! Please use "npm start"'); 107 | }); 108 | 109 | 110 | /** 111 | * Gulp npm task 112 | **/ 113 | gulp.task('start', () => { 114 | return runSequence( 115 | ['clean'], 116 | ['build'], 117 | ['watch'] 118 | ); 119 | }); 120 | -------------------------------------------------------------------------------- /workspace/assets/scripts/abehiroshize__content.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const $ = require('jquery'); 4 | 5 | chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) { 6 | const documentTitle = $(document).find('title').text(); 7 | const navigationId = 'abehiroshize-navigation'; 8 | const navigationInnerListId = 'abehiroshize-list'; 9 | const contentId = 'abehiroshize-content'; 10 | 11 | 12 | function removeExistingStyles() { 13 | const $styleElements = $('style'); 14 | const $stylesheetElements = $('link[rel="stylesheet"]'); 15 | const $cssElements = $('link[type="text/css"]') 16 | 17 | $styleElements.remove(); 18 | $stylesheetElements.remove(); 19 | $cssElements.remove(); 20 | $('*').removeAttr('style'); 21 | } 22 | 23 | 24 | function createNavigation() { 25 | if ($('body').length === 0) { 26 | $('').insertAfter('head'); 27 | } 28 | 29 | $('
', { 'id': navigationId }).prependTo('body'); 30 | 31 | $(`#${navigationId}`).append(``); 32 | $('ul').each(function() { 33 | if ($(this).closest('main').length === 0) { 34 | $(this).find('li').appendTo(`#${navigationInnerListId}`); 35 | } 36 | }); 37 | } 38 | 39 | 40 | function createContents() { 41 | $('
', { 'id': contentId }).insertAfter(`#${navigationId}`); 42 | 43 | if ($('h1').length > 0) { 44 | $('h1').remove(); 45 | } 46 | 47 | $(`

${documentTitle}のホームページ

`).appendTo(`#${contentId}`); 48 | 49 | $(`#${contentId} ~ *`).appendTo(`#${contentId}`); 50 | } 51 | 52 | 53 | function adjustStyles() { 54 | const navigationWidth = '300px'; 55 | 56 | $('head').append(` 57 | 58 | 59 | 116 | `); 117 | } 118 | 119 | 120 | function abehiroshize() { 121 | $.when( 122 | $.when( 123 | removeExistingStyles() 124 | 125 | ).done(function() { 126 | createNavigation(); 127 | createContents(); 128 | }) 129 | 130 | ).done(function() { 131 | adjustStyles(); 132 | }); 133 | } 134 | 135 | 136 | abehiroshize(); 137 | }); 138 | --------------------------------------------------------------------------------