├── .gitignore ├── README.md ├── button.html ├── contentscript-src.js ├── extension ├── _locales │ └── en │ │ └── messages.json ├── images │ ├── icon-128.png │ ├── icon-16.png │ └── tri.png ├── manifest.json └── scripts │ └── .empty ├── new-button.html ├── package.json ├── playback-chrome.gif └── screenshot.png /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | extension/scripts -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # playback-chrome 2 | 3 | chrome extension that adds a button to youtube videos to 'play in playback' 4 | 5 | ![gif](playback-chrome.gif) 6 | 7 | ## install 8 | 9 | [https://chrome.google.com/webstore/detail/jibgihafbnobhcaankccoekndbilehmc](https://chrome.google.com/webstore/detail/jibgihafbnobhcaankccoekndbilehmc) 10 | 11 | ## building locally 12 | 13 | - clone this 14 | - run `npm install` 15 | - run `npm run build` 16 | - in chrome's extensions ui do 'load unpacked extension' and point it at the 'extension' folder in this repo 17 | - also install [Playback.app](https://github.com/mafintosh/playback) in Mac's Applications folder (note: **must** but in the Applications folder for this extension to work) 18 | -------------------------------------------------------------------------------- /button.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /contentscript-src.js: -------------------------------------------------------------------------------- 1 | var newElement = require('new-element') 2 | var fs = require('fs') 3 | var domready = require('domready') 4 | var template = fs.readFileSync('./button.html').toString() 5 | var newTemplate = fs.readFileSync('./new-button.html').toString() 6 | 7 | var tries = 0 8 | domready(inject) 9 | 10 | 11 | function inject () { 12 | var buttons = document.querySelector('.html5-player-chrome') 13 | var button = newElement(template) 14 | 15 | if (!buttons) { 16 | buttons = document.querySelector('.ytp-chrome-controls') 17 | button = newElement(newTemplate) 18 | } 19 | 20 | if (!buttons) { 21 | if (++tries > 5) return 22 | setTimeout(inject, 1000) 23 | } 24 | 25 | button.href = getHref() 26 | buttons.insertBefore(button, buttons.firstChild) 27 | 28 | button.addEventListener('click', function () { 29 | var pause = buttons.querySelector('.ytp-button-pause') 30 | if (!pause) pause = buttons.querySelector('.ytp-play-button') 31 | if (pause) pause.click() 32 | }) 33 | 34 | // hack if wrong href got set at inject time 35 | button.addEventListener('mouseover', function () { 36 | button.href = getHref() 37 | }) 38 | } 39 | 40 | function getHref() { 41 | var href = window.location.href 42 | var parts = href.split(':') 43 | parts.shift() // get rid of https 44 | parts.unshift('playback') 45 | return parts.join(':') 46 | } 47 | -------------------------------------------------------------------------------- /extension/_locales/en/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "appName": { 3 | "message": "Playback Button", 4 | "description": "The name of the application" 5 | }, 6 | "appDescription": { 7 | "message": "Adds a button for Playback.app to YouTube", 8 | "description": "The description of the application" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /extension/images/icon-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-mapper/playback-chrome/72723f5bae8a8470bcc32f120c7a9ab46ff120b8/extension/images/icon-128.png -------------------------------------------------------------------------------- /extension/images/icon-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-mapper/playback-chrome/72723f5bae8a8470bcc32f120c7a9ab46ff120b8/extension/images/icon-16.png -------------------------------------------------------------------------------- /extension/images/tri.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-mapper/playback-chrome/72723f5bae8a8470bcc32f120c7a9ab46ff120b8/extension/images/tri.png -------------------------------------------------------------------------------- /extension/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "__MSG_appName__", 3 | "version": "1.0.0", 4 | "manifest_version": 2, 5 | "description": "__MSG_appDescription__", 6 | "homepage_url": "https://github.com/maxogden/playback-chrome", 7 | "icons": { 8 | "16": "images/icon-16.png", 9 | "128": "images/icon-128.png" 10 | }, 11 | "default_locale": "en", 12 | "content_scripts": [ 13 | { 14 | "matches": [ 15 | "https://youtube.com/*", 16 | "https://www.youtube.com/*" 17 | ], 18 | "js": [ 19 | "scripts/contentscript.js" 20 | ], 21 | "run_at": "document_end", 22 | "all_frames": false 23 | } 24 | ], 25 | "permissions": [] 26 | } -------------------------------------------------------------------------------- /extension/scripts/.empty: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /new-button.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "playback-chrome", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "browserify -t brfs contentscript-src.js -o extension/scripts/contentscript.js" 8 | }, 9 | "author": "", 10 | "license": "BSD", 11 | "devDependencies": { 12 | "brfs": "^1.4.0", 13 | "browserify": "^9.0.8", 14 | "domready": "^1.0.7" 15 | }, 16 | "dependencies": { 17 | "new-element": "0.0.2" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /playback-chrome.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-mapper/playback-chrome/72723f5bae8a8470bcc32f120c7a9ab46ff120b8/playback-chrome.gif -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-mapper/playback-chrome/72723f5bae8a8470bcc32f120c7a9ab46ff120b8/screenshot.png --------------------------------------------------------------------------------