Skip to content

Instantly share code, notes, and snippets.

View alejandrocoding's full-sized avatar
🏠
Working from home

Alejandro Lora alejandrocoding

🏠
Working from home
View GitHub Profile
@alejandrocoding
alejandrocoding / manifest.json
Created June 24, 2020 09:02
Manifest.json adds contentScript matching GitHub domain
"content_scripts": [
{
"matches": ["*://*.github.com/*"],
"js": ["contentScript.js", "runtime.js"]
}
]
@alejandrocoding
alejandrocoding / browserslist
Created June 13, 2020 00:57
Chrome Extension browserlist supports only newer versions - disable diff loading CLI
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running:
# npx browserslist
Chrome >= 61
@alejandrocoding
alejandrocoding / manifest.json
Created June 13, 2020 00:41
Chrome Extension manifest json browser action added
{
"name": "My Extension",
"version": "1.0.0",
"description": "Description here",
"manifest_version": 2,
"permissions": ["webNavigation", "tabs"],
"browser_action": {
"default_popup": "index.html"
}
}
@alejandrocoding
alejandrocoding / angular.json5
Created June 12, 2020 23:40
Chrome Extension angular.json with live reload only in dev mode
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
...
"projects": {
"chrome-extension-template": {
...
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
@alejandrocoding
alejandrocoding / custom-webpack-dev.config.js
Created June 12, 2020 23:35
Chrome Extension Live reload for background and contentScript in dev
const ExtensionReloader = require('webpack-extension-reloader')
const config = require('./custom-webpack.config');
module.exports = {...config,
mode: 'development',
plugins: [new ExtensionReloader({
reloadPage: true,
entries: {
background: 'background',
contentScript: 'contentScript'
@alejandrocoding
alejandrocoding / manifest.json
Created June 12, 2020 23:24
Chrome Extension with background and contentScript entries
{
"name": "My Extension",
"version": "1.0.0",
"description": "Description here",
"manifest_version": 2,
"permissions": ["webNavigation", "tabs"],
"page_action": {
"default_popup": "index.html"
},
"background": {
@alejandrocoding
alejandrocoding / contentScript.ts
Created June 12, 2020 23:16
Chrome Extension contentScript.ts log
console.log('Hola desde ContentScript.ts!!');
@alejandrocoding
alejandrocoding / tsconfig.app.json
Created June 12, 2020 18:55
Tsconfig includes background and contentScript into the TS compilation
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": ["chrome"]
},
"files": [
"src/main.ts",
"src/polyfills.ts",
"src/background.ts",
@alejandrocoding
alejandrocoding / angular.json5
Created June 12, 2020 18:36
Angular json file bundle with custom webpack
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
...
"projects": {
"chrome-extension-template": {
...
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
@alejandrocoding
alejandrocoding / manifest.json
Last active June 12, 2020 18:15
Manifest for Chrome Extension adding background file in Angular app
{
"name": "My Extension",
"version": "1.0.0",
"description": "Description here",
"manifest_version": 2,
"permissions": ["webNavigation", "tabs"],
"page_action": {
"default_popup": "index.html"
},
"background": {