diff --git a/.eslintrc.js b/.eslintrc.js index 061a8a8..24841b6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,25 +1,28 @@ module.exports = { - parser: '@typescript-eslint/parser', // Specifies the ESLint parser - extends: [ - 'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin - 'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react - 'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier - 'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array. - ], - parserOptions: { - ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features - sourceType: 'module', // Allows for the use of imports - ecmaFeatures: { - jsx: true, // Allows for the parsing of JSX - }, + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + env: { + jquery: true, + }, + extends: [ + "plugin:@typescript-eslint/recommended", // Uses the recommended rules from @typescript-eslint/eslint-plugin + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier + "plugin:prettier/recommended", // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array. + ], + parserOptions: { + ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true, // Allows for the parsing of JSX }, - rules: { - // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs - // e.g. "@typescript-eslint/explicit-function-return-type": "off", - }, - settings: { - react: { - version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use - }, + }, + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + // e.g. "@typescript-eslint/explicit-function-return-type": "off", + }, + settings: { + react: { + version: "detect", // Tells eslint-plugin-react to automatically detect the version of React to use }, + }, }; diff --git a/.prettierrc.js b/.prettierrc.js index 5c9d522..4bc87a0 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,6 +1,6 @@ module.exports = { - semi: true, - trailingComma: "all", - singleQuote: false, - tabWidth: 4, + semi: true, + trailingComma: "all", + singleQuote: false, + tabWidth: 2, }; diff --git a/README.md b/README.md index 488931c..01bb73d 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,8 @@ -![](https://i.imgur.com/sAJbv36.png) :desktop_computer: A Web Extension starter kit built with React, TypeScript, SCSS, Storybook, EsLint, Prettier, Jest, Bootstrap,x & Webpack. Compatible with both Google Chrome + Mozilla Firefox. -![Example Extension Popup](https://i.imgur.com/Wp37usG.png "Example Extension Popup") - **Getting Started** Run the following commands to install dependencies and start developing diff --git a/babel.config.js b/babel.config.js index bcc571e..dd242dc 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,6 +1,6 @@ module.exports = { - presets: [ - ["@babel/preset-env", { targets: { node: "current" } }], - "@babel/preset-typescript", - ], + presets: [ + ["@babel/preset-env", { targets: { node: "current" } }], + "@babel/preset-typescript", + ], }; diff --git a/dist/jquery.min.js b/dist/jquery.min.js new file mode 100644 index 0000000..9e3cff9 --- /dev/null +++ b/dist/jquery.min.js @@ -0,0 +1 @@ +!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],E=C.document,r=Object.getPrototypeOf,s=t.slice,g=t.concat,u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.4.1",k=function(e,t){return new k.fn.init(e,t)},p=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;function d(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp($),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+$),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),ne=function(e,t,n){var r="0x"+t-65536;return r!=r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(m.childNodes),m.childNodes),t[m.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&((e?e.ownerDocument||e:m)!==C&&T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!A[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&U.test(t)){(s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=k),o=(l=h(t)).length;while(o--)l[o]="#"+s+" "+xe(l[o]);c=l.join(","),f=ee.test(t)&&ye(e.parentNode)||e}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){A(t,!0)}finally{s===k&&e.removeAttribute("id")}}}return g(t.replace(B,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[k]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:m;return r!==C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),m!==C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=k,!C.getElementsByName||!C.getElementsByName(k).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+k+"-]").length||v.push("~="),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+k+"+*").length||v.push(".#.+[+~]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",$)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e===C||e.ownerDocument===m&&y(m,e)?-1:t===C||t.ownerDocument===m&&y(m,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e===C?-1:t===C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]===m?-1:s[r]===m?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if((e.ownerDocument||e)!==C&&T(e),d.matchesSelector&&E&&!A[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){A(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=p[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&p(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?k.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?k.grep(e,function(e){return e===n!==r}):"string"!=typeof n?k.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(k.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||q,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:L.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof k?t[0]:t,k.merge(this,k.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),D.test(r[1])&&k.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(k):k.makeArray(e,this)}).prototype=k.fn,q=k(E);var H=/^(?:parents|prev(?:Until|All))/,O={children:!0,contents:!0,next:!0,prev:!0};function P(e,t){while((e=e[t])&&1!==e.nodeType);return e}k.fn.extend({has:function(e){var t=k(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i,ge={option:[1,""],thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?k.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;nx",y.noCloneChecked=!!me.cloneNode(!0).lastChild.defaultValue;var Te=/^key/,Ce=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Ee=/^([^.]*)(?:\.(.+)|)/;function ke(){return!0}function Se(){return!1}function Ne(e,t){return e===function(){try{return E.activeElement}catch(e){}}()==("focus"===t)}function Ae(e,t,n,r,i,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(r=r||n,n=void 0),t)Ae(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=Se;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return k().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=k.guid++)),e.each(function(){k.event.add(this,t,i,r,n)})}function De(e,i,o){o?(Q.set(e,i,!1),k.event.add(e,i,{namespace:!1,handler:function(e){var t,n,r=Q.get(this,i);if(1&e.isTrigger&&this[i]){if(r.length)(k.event.special[i]||{}).delegateType&&e.stopPropagation();else if(r=s.call(arguments),Q.set(this,i,r),t=o(this,i),this[i](),r!==(n=Q.get(this,i))||t?Q.set(this,i,!1):n={},r!==n)return e.stopImmediatePropagation(),e.preventDefault(),n.value}else r.length&&(Q.set(this,i,{value:k.event.trigger(k.extend(r[0],k.Event.prototype),r.slice(1),this)}),e.stopImmediatePropagation())}})):void 0===Q.get(e,i)&&k.event.add(e,i,ke)}k.event={global:{},add:function(t,e,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Q.get(t);if(v){n.handler&&(n=(o=n).handler,i=o.selector),i&&k.find.matchesSelector(ie,i),n.guid||(n.guid=k.guid++),(u=v.events)||(u=v.events={}),(a=v.handle)||(a=v.handle=function(e){return"undefined"!=typeof k&&k.event.triggered!==e.type?k.event.dispatch.apply(t,arguments):void 0}),l=(e=(e||"").match(R)||[""]).length;while(l--)d=g=(s=Ee.exec(e[l])||[])[1],h=(s[2]||"").split(".").sort(),d&&(f=k.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=k.event.special[d]||{},c=k.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&k.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||((p=u[d]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(t,r,h,a)||t.addEventListener&&t.addEventListener(d,a)),f.add&&(f.add.call(t,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),k.event.global[d]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Q.hasData(e)&&Q.get(e);if(v&&(u=v.events)){l=(t=(t||"").match(R)||[""]).length;while(l--)if(d=g=(s=Ee.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d){f=k.event.special[d]||{},p=u[d=(r?f.delegateType:f.bindType)||d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;while(o--)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||k.removeEvent(e,d,v.handle),delete u[d])}else for(d in u)k.event.remove(e,d+t[l],n,r,!0);k.isEmptyObject(u)&&Q.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=k.event.fix(e),u=new Array(arguments.length),l=(Q.get(this,"events")||{})[s.type]||[],c=k.event.special[s.type]||{};for(u[0]=s,t=1;t\x20\t\r\n\f]*)[^>]*)\/>/gi,qe=/\s*$/g;function Oe(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&k(e).children("tbody")[0]||e}function Pe(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function Re(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Me(e,t){var n,r,i,o,a,s,u,l;if(1===t.nodeType){if(Q.hasData(e)&&(o=Q.access(e),a=Q.set(t,o),l=o.events))for(i in delete a.handle,a.events={},l)for(n=0,r=l[i].length;n")},clone:function(e,t,n){var r,i,o,a,s,u,l,c=e.cloneNode(!0),f=oe(e);if(!(y.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||k.isXMLDoc(e)))for(a=ve(c),r=0,i=(o=ve(e)).length;r").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Vt,Gt=[],Yt=/(=)\?(?=&|$)|\?\?/;k.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Gt.pop()||k.expando+"_"+kt++;return this[e]=!0,e}}),k.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Yt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Yt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Yt,"$1"+r):!1!==e.jsonp&&(e.url+=(St.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||k.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?k(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Gt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((Vt=E.implementation.createHTMLDocument("").body).innerHTML="
",2===Vt.childNodes.length),k.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=D.exec(e))?[t.createElement(i[1])]:(i=we([e],t,o),o&&o.length&&k(o).remove(),k.merge([],i.childNodes)));var r,i,o},k.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(k.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},k.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){k.fn[t]=function(e){return this.on(t,e)}}),k.expr.pseudos.animated=function(t){return k.grep(k.timers,function(e){return t===e.elem}).length},k.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=k.css(e,"position"),c=k(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=k.css(e,"top"),u=k.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,k.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},k.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){k.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===k.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===k.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=k(e).offset()).top+=k.css(e,"borderTopWidth",!0),i.left+=k.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-k.css(r,"marginTop",!0),left:t.left-i.left-k.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===k.css(e,"position"))e=e.offsetParent;return e||ie})}}),k.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;k.fn[t]=function(e){return _(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),k.each(["top","left"],function(e,n){k.cssHooks[n]=ze(y.pixelPosition,function(e,t){if(t)return t=_e(e,n),$e.test(t)?k(e).position()[n]+"px":t})}),k.each({Height:"height",Width:"width"},function(a,s){k.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){k.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return _(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?k.css(e,t,i):k.style(e,t,n,i)},s,n?e:void 0,n)}})}),k.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){k.fn[n]=function(e,t){return 0"], + "js": [ + "jquery.min.js", + "js/content.js" + ], + "run_at": "document_end" + } + ], "icons": { "16": "icon-16.png", "48": "icon-48.png", "128": "icon-128.png" }, - "permissions": ["tabs", "activeTab", "notifications", "http://*/", "https://*/"] + "permissions": [ + "tabs", + "activeTab", + "notifications", + "http://*/", + "https://*/" + ] } diff --git a/jest.config.js b/jest.config.js index c733962..8ff32b1 100644 --- a/jest.config.js +++ b/jest.config.js @@ -2,129 +2,128 @@ // https://jestjs.io/docs/en/configuration.html module.exports = { - // All imported modules in your tests should be mocked automatically - // automock: false, - // Stop running tests after `n` failures - // bail: 0, - // Respect "browser" field in package.json when resolving modules - // browser: false, - // The directory where Jest should store its cached dependency information - // cacheDirectory: "/tmp/jest_rs", - // Automatically clear mock calls and instances between every test - // clearMocks: true, - // Indicates whether the coverage information should be collected while executing the test - // collectCoverage: false, - // An array of glob patterns indicating a set of files for which coverage information should be collected - // collectCoverageFrom: null, - // The directory where Jest should output its coverage files - // coverageDirectory: "coverage", - // An array of regexp pattern strings used to skip coverage collection - // coveragePathIgnorePatterns: [ - // "/node_modules/" - // ], - // A list of reporter names that Jest uses when writing coverage reports - // coverageReporters: [ - // "json", - // "text", - // "lcov", - // "clover" - // ], - // An object that configures minimum threshold enforcement for coverage results - // coverageThreshold: null, - // A path to a custom dependency extractor - // dependencyExtractor: null, - // Make calling deprecated APIs throw helpful error messages - // errorOnDeprecated: false, - // Force coverage collection from ignored files using an array of glob patterns - // forceCoverageMatch: [], - // A path to a module which exports an async function that is triggered once before all test suites - // globalSetup: null, - // A path to a module which exports an async function that is triggered once after all test suites - // globalTeardown: null, - // A set of global variables that need to be available in all test environments - // globals: {}, - // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers. - // maxWorkers: "50%", - // An array of directory names to be searched recursively up from the requiring module's location - // moduleDirectories: [ - // "node_modules" - // ], - // An array of file extensions your modules use - moduleFileExtensions: ["js", "json", "jsx", "ts", "tsx", "node"], - // A map from regular expressions to module names that allow to stub out resources with a single module - moduleNameMapper: { - "@src/(.*)": "/src/$1", - "\\.(css|less|scss|sss|styl)$": - "/node_modules/jest-css-modules", - }, - // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader - // modulePathIgnorePatterns: [], - // Activates notifications for test results - // notify: false, - // An enum that specifies notification mode. Requires { notify: true } - // notifyMode: "failure-change", - // A preset that is used as a base for Jest's configuration - // preset: null, - // Run tests from one or more projects - // projects: null, - // Use this configuration option to add custom reporters to Jest - // reporters: undefined, - // Automatically reset mock state between every test - // resetMocks: false, - // Reset the module registry before running each individual test - // resetModules: false, - // A path to a custom resolver - // resolver: null, - // Automatically restore mock state between every test - // restoreMocks: false, - // The root directory that Jest should scan for tests and modules within - // rootDir: null, - // A list of paths to directories that Jest should use to search for files in - roots: ["/src"], - // Allows you to use a custom runner instead of Jest's default test runner - // runner: "jest-runner", - // The paths to modules that run some code to configure or set up the testing environment before each test - // setupFiles: [], - // A list of paths to modules that run some code to configure or set up the testing framework before each test - // setupFilesAfterEnv: [], - // A list of paths to snapshot serializer modules Jest should use for snapshot testing - // snapshotSerializers: [], - // The test environment that will be used for testing - // testEnvironment: "jest-environment-jsdom", - // Options that will be passed to the testEnvironment - // testEnvironmentOptions: {}, - // Adds a location field to test results - // testLocationInResults: false, - // The glob patterns Jest uses to detect test files - // testMatch: [ - // "**/__tests__/**/*.[jt]s?(x)", - // "**/?(*.)+(spec|test).[tj]s?(x)" - // ], - // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped - testPathIgnorePatterns: ["/node_modules/", "stories.tsx"], - // The regexp pattern or array of patterns that Jest uses to detect test files - // testRegex: [], - // This option allows the use of a custom results processor - // testResultsProcessor: null, - // This option allows use of a custom test runner - // testRunner: "jasmine2", - // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href - // testURL: "http://localhost", - // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout" - // timers: "real", - // A map from regular expressions to paths to transformers - // transform: null, - transform: { - "\\.tsx?$": "ts-jest", - }, - // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation - // transformIgnorePatterns: ["/node_modules/"], - // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them - // unmockedModulePathPatterns: undefined, - // Indicates whether each individual test should be reported during the run - // verbose: null, - // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode - // watchPathIgnorePatterns: [], - // Whether to use watchman for file crawling - // watchman: true, + // All imported modules in your tests should be mocked automatically + // automock: false, + // Stop running tests after `n` failures + // bail: 0, + // Respect "browser" field in package.json when resolving modules + // browser: false, + // The directory where Jest should store its cached dependency information + // cacheDirectory: "/tmp/jest_rs", + // Automatically clear mock calls and instances between every test + // clearMocks: true, + // Indicates whether the coverage information should be collected while executing the test + // collectCoverage: false, + // An array of glob patterns indicating a set of files for which coverage information should be collected + // collectCoverageFrom: null, + // The directory where Jest should output its coverage files + // coverageDirectory: "coverage", + // An array of regexp pattern strings used to skip coverage collection + // coveragePathIgnorePatterns: [ + // "/node_modules/" + // ], + // A list of reporter names that Jest uses when writing coverage reports + // coverageReporters: [ + // "json", + // "text", + // "lcov", + // "clover" + // ], + // An object that configures minimum threshold enforcement for coverage results + // coverageThreshold: null, + // A path to a custom dependency extractor + // dependencyExtractor: null, + // Make calling deprecated APIs throw helpful error messages + // errorOnDeprecated: false, + // Force coverage collection from ignored files using an array of glob patterns + // forceCoverageMatch: [], + // A path to a module which exports an async function that is triggered once before all test suites + // globalSetup: null, + // A path to a module which exports an async function that is triggered once after all test suites + // globalTeardown: null, + // A set of global variables that need to be available in all test environments + // globals: {}, + // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers. + // maxWorkers: "50%", + // An array of directory names to be searched recursively up from the requiring module's location + // moduleDirectories: [ + // "node_modules" + // ], + // An array of file extensions your modules use + moduleFileExtensions: ["js", "json", "jsx", "ts", "tsx", "node"], + // A map from regular expressions to module names that allow to stub out resources with a single module + moduleNameMapper: { + "@src/(.*)": "/src/$1", + "\\.(css|less|scss|sss|styl)$": "/node_modules/jest-css-modules", + }, + // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader + // modulePathIgnorePatterns: [], + // Activates notifications for test results + // notify: false, + // An enum that specifies notification mode. Requires { notify: true } + // notifyMode: "failure-change", + // A preset that is used as a base for Jest's configuration + // preset: null, + // Run tests from one or more projects + // projects: null, + // Use this configuration option to add custom reporters to Jest + // reporters: undefined, + // Automatically reset mock state between every test + // resetMocks: false, + // Reset the module registry before running each individual test + // resetModules: false, + // A path to a custom resolver + // resolver: null, + // Automatically restore mock state between every test + // restoreMocks: false, + // The root directory that Jest should scan for tests and modules within + // rootDir: null, + // A list of paths to directories that Jest should use to search for files in + roots: ["/src"], + // Allows you to use a custom runner instead of Jest's default test runner + // runner: "jest-runner", + // The paths to modules that run some code to configure or set up the testing environment before each test + // setupFiles: [], + // A list of paths to modules that run some code to configure or set up the testing framework before each test + // setupFilesAfterEnv: [], + // A list of paths to snapshot serializer modules Jest should use for snapshot testing + // snapshotSerializers: [], + // The test environment that will be used for testing + // testEnvironment: "jest-environment-jsdom", + // Options that will be passed to the testEnvironment + // testEnvironmentOptions: {}, + // Adds a location field to test results + // testLocationInResults: false, + // The glob patterns Jest uses to detect test files + // testMatch: [ + // "**/__tests__/**/*.[jt]s?(x)", + // "**/?(*.)+(spec|test).[tj]s?(x)" + // ], + // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped + testPathIgnorePatterns: ["/node_modules/", "stories.tsx"], + // The regexp pattern or array of patterns that Jest uses to detect test files + // testRegex: [], + // This option allows the use of a custom results processor + // testResultsProcessor: null, + // This option allows use of a custom test runner + // testRunner: "jasmine2", + // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href + // testURL: "http://localhost", + // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout" + // timers: "real", + // A map from regular expressions to paths to transformers + // transform: null, + transform: { + "\\.tsx?$": "ts-jest", + }, + // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation + // transformIgnorePatterns: ["/node_modules/"], + // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them + // unmockedModulePathPatterns: undefined, + // Indicates whether each individual test should be reported during the run + // verbose: null, + // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode + // watchPathIgnorePatterns: [], + // Whether to use watchman for file crawling + // watchman: true, }; diff --git a/package.json b/package.json index d2a41ab..4ae05ad 100644 --- a/package.json +++ b/package.json @@ -1,83 +1,75 @@ { - "name": "react-typescript-chrome-extension-starter", - "version": "1.0.0", - "description": "A Chrome Extension starter kit built with React, TypeScript, SCSS, Bootstrap, EsLint, Prettier & Webpack", - "main": "index.js", - "scripts": { - "build": "webpack --config webpack.prod.js", - "dev": "webpack -w --config webpack.dev.js", - "test": "jest --config=jest.config.js", - "lint": "eslint --fix -c ./.eslintrc.js \"src/**/*.ts*\"", - "prettify": "prettier --write \"src/**/*.ts*\"", - "storybook": "start-storybook -p 6006", - "build-storybook": "build-storybook" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/aeksco/react-typescript-chrome-extension-starter.git" - }, - "keywords": [ - "react", - "typescript", - "chrome", - "extension", - "boilerplate" - ], - "author": "Alexander Schwartzberg", - "license": "MIT", - "bugs": { - "url": "https://github.com/aeksco/react-typescript-chrome-extension-starter/issues" - }, - "homepage": "https://github.com/aeksco/react-typescript-chrome-extension-starter#readme", - "devDependencies": { - "@babel/core": "^7.7.7", - "@babel/preset-env": "^7.7.7", - "@babel/preset-typescript": "^7.7.7", - "@storybook/addon-actions": "^5.2.8", - "@storybook/addon-info": "^5.2.8", - "@storybook/addon-knobs": "^5.2.8", - "@storybook/addon-links": "^5.2.8", - "@storybook/addons": "^5.2.8", - "@storybook/preset-typescript": "^1.2.0", - "@storybook/react": "^5.2.8", - "@types/chrome": "^0.0.91", - "@types/jest": "^24.0.25", - "@types/node": "^13.1.2", - "@types/react": "^16.9.17", - "@types/react-dom": "^16.9.4", - "@types/react-test-renderer": "^16.9.1", - "@typescript-eslint/eslint-plugin": "^2.14.0", - "@typescript-eslint/parser": "^2.14.0", - "awesome-typescript-loader": "^5.2.1", - "babel-core": "^6.26.3", - "babel-jest": "^24.9.0", - "babel-loader": "^8.0.6", - "css-loader": "^3.4.0", - "eslint": "^6.8.0", - "eslint-config-prettier": "^6.9.0", - "eslint-plugin-prettier": "^3.1.2", - "eslint-plugin-react": "^7.17.0", - "jest": "^24.9.0", - "jest-css-modules": "^2.1.0", - "node-sass": "^4.13.0", - "prettier": "^1.19.1", - "react-docgen-typescript-loader": "^3.6.0", - "react-docgen-typescript-webpack-plugin": "^1.1.0", - "sass-loader": "^8.0.0", - "storybook-addon-jsx": "^7.1.13", - "style-loader": "^1.1.2", - "ts-jest": "^24.2.0", - "ts-loader": "^6.2.1", - "typescript": "^3.7.4", - "webextension-polyfill-ts": "^0.11.0", - "webpack": "^4.41.5", - "webpack-cli": "^3.3.10", - "webpack-merge": "^4.2.2" - }, - "dependencies": { - "bootstrap": "^4.4.1", - "react": "^16.12.0", - "react-dom": "^16.12.0", - "react-test-renderer": "^16.12.0" - } + "name": "react-typescript-chrome-extension-starter", + "version": "1.0.0", + "description": "A Chrome Extension starter kit built with React, TypeScript, SCSS, Bootstrap, EsLint, Prettier & Webpack", + "main": "index.js", + "scripts": { + "build": "webpack --config webpack.prod.js", + "dev": "webpack -w --config webpack.dev.js", + "test": "jest --config=jest.config.js", + "lint": "eslint --fix -c ./.eslintrc.js \"src/**/*.ts*\"", + "prettify": "prettier --write \"src/**/*.ts*\"", + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" + }, + "keywords": [ + "react", + "typescript", + "chrome", + "extension", + "boilerplate" + ], + "license": "MIT", + "devDependencies": { + "@babel/core": "^7.7.7", + "@babel/preset-env": "^7.7.7", + "@babel/preset-typescript": "^7.7.7", + "@storybook/addon-actions": "^5.2.8", + "@storybook/addon-info": "^5.2.8", + "@storybook/addon-knobs": "^5.2.8", + "@storybook/addon-links": "^5.2.8", + "@storybook/addons": "^5.2.8", + "@storybook/preset-typescript": "^1.2.0", + "@storybook/react": "^5.2.8", + "@types/chrome": "^0.0.91", + "@types/jest": "^24.0.25", + "@types/node": "^13.1.2", + "@types/react": "^16.9.17", + "@types/react-dom": "^16.9.4", + "@types/react-test-renderer": "^16.9.1", + "@typescript-eslint/eslint-plugin": "^2.14.0", + "@typescript-eslint/parser": "^2.14.0", + "awesome-typescript-loader": "^5.2.1", + "babel-core": "^6.26.3", + "babel-jest": "^24.9.0", + "babel-loader": "^8.0.6", + "css-loader": "^3.4.0", + "eslint": "^6.8.0", + "eslint-config-prettier": "^6.9.0", + "eslint-plugin-prettier": "^3.1.2", + "eslint-plugin-react": "^7.17.0", + "jest": "^24.9.0", + "jest-css-modules": "^2.1.0", + "node-sass": "^4.13.0", + "prettier": "^1.19.1", + "react-docgen-typescript-loader": "^3.6.0", + "react-docgen-typescript-webpack-plugin": "^1.1.0", + "sass-loader": "^8.0.0", + "storybook-addon-jsx": "^7.1.13", + "style-loader": "^1.1.2", + "ts-jest": "^24.2.0", + "ts-loader": "^6.2.1", + "typescript": "^3.7.4", + "webextension-polyfill-ts": "^0.11.0", + "webpack": "^4.41.5", + "webpack-cli": "^3.3.10", + "webpack-merge": "^4.2.2" + }, + "dependencies": { + "@types/jquery": "^3.3.34", + "bootstrap": "^4.4.1", + "react": "^16.12.0", + "react-dom": "^16.12.0", + "react-test-renderer": "^16.12.0" + } } diff --git a/src/__mocks__/webextension-polyfill-ts.ts b/src/__mocks__/webextension-polyfill-ts.ts index d46e057..c8f98b7 100644 --- a/src/__mocks__/webextension-polyfill-ts.ts +++ b/src/__mocks__/webextension-polyfill-ts.ts @@ -3,15 +3,15 @@ // This is used to mock these values for Storybook so you can develop your components // outside the Web Extension environment provided by a compatible browser export const browser: any = { - tabs: { - executeScript(currentTabId: number, details: any) { - return Promise.resolve({ done: true }); - }, + tabs: { + executeScript(currentTabId: number, details: any) { + return Promise.resolve({ done: true }); }, + }, }; export interface Tabs { - Tab: { - id: number; - }; + Tab: { + id: number; + }; } diff --git a/src/backgroundPage.ts b/src/backgroundPage.ts index 48fa0ba..01c910e 100644 --- a/src/backgroundPage.ts +++ b/src/backgroundPage.ts @@ -2,9 +2,9 @@ import { browser } from "webextension-polyfill-ts"; // Listen for messages sent from other parts of the extension browser.runtime.onMessage.addListener((request: { popupMounted: boolean }) => { - // Log statement if request.popupMounted is true - // NOTE: this request is sent in `popup/component.tsx` - if (request.popupMounted) { - console.log("backgroundPage notified that Popup.tsx has mounted."); - } + // Log statement if request.popupMounted is true + // NOTE: this request is sent in `popup/component.tsx` + if (request.popupMounted) { + console.log("backgroundPage notified that Popup.tsx has mounted."); + } }); diff --git a/src/components/dev/story.tsx b/src/components/dev/story.tsx index 1a03a70..de2aedc 100644 --- a/src/components/dev/story.tsx +++ b/src/components/dev/story.tsx @@ -4,15 +4,15 @@ import "@src/scss/app.scss"; // // // // interface StoryProps { - children: React.ReactNode; + children: React.ReactNode; } export const Story: FunctionComponent = (props: StoryProps) => { - return ( -
-
-
{props.children}
-
-
- ); + return ( +
+
+
{props.children}
+
+
+ ); }; diff --git a/src/components/hello/__tests__/hello.stories.tsx b/src/components/hello/__tests__/hello.stories.tsx index 68bb0c7..76714a8 100644 --- a/src/components/hello/__tests__/hello.stories.tsx +++ b/src/components/hello/__tests__/hello.stories.tsx @@ -6,9 +6,9 @@ import { Story } from "@src/components/dev"; // // // // storiesOf("Hello", module).add("renders", () => { - return ( - - - - ); + return ( + + + + ); }); diff --git a/src/components/hello/__tests__/test_hello.tsx b/src/components/hello/__tests__/test_hello.tsx index a6ba44e..cab33b0 100644 --- a/src/components/hello/__tests__/test_hello.tsx +++ b/src/components/hello/__tests__/test_hello.tsx @@ -3,8 +3,8 @@ import { Hello } from "../component"; import renderer, { ReactTestRendererJSON } from "react-test-renderer"; it("component renders", () => { - const tree: ReactTestRendererJSON | null = renderer - .create() - .toJSON(); - expect(tree).toMatchSnapshot(); + const tree: ReactTestRendererJSON | null = renderer + .create() + .toJSON(); + expect(tree).toMatchSnapshot(); }); diff --git a/src/components/hello/component.tsx b/src/components/hello/component.tsx index 288cceb..c117cf7 100644 --- a/src/components/hello/component.tsx +++ b/src/components/hello/component.tsx @@ -4,11 +4,11 @@ import "./styles.scss"; // // // // export const Hello: FunctionComponent = () => { - return ( -
-
-

Example Extension

-
-
- ); + return ( +
+
+

Example Extension

+
+
+ ); }; diff --git a/src/components/hello/styles.scss b/src/components/hello/styles.scss index 599d4e4..a5dbebc 100644 --- a/src/components/hello/styles.scss +++ b/src/components/hello/styles.scss @@ -1,3 +1,3 @@ .hello-text { - color: red; + color: red; } diff --git a/src/components/scroller/__tests__/scroller.stories.tsx b/src/components/scroller/__tests__/scroller.stories.tsx index 36f7d3c..51e3641 100644 --- a/src/components/scroller/__tests__/scroller.stories.tsx +++ b/src/components/scroller/__tests__/scroller.stories.tsx @@ -6,9 +6,9 @@ import { Story } from "@src/components/dev"; // // // // storiesOf("Scroller", module).add("renders", () => { - return ( - - - - ); + return ( + + + + ); }); diff --git a/src/components/scroller/__tests__/test_scroller.tsx b/src/components/scroller/__tests__/test_scroller.tsx index bd96559..0d7eed5 100644 --- a/src/components/scroller/__tests__/test_scroller.tsx +++ b/src/components/scroller/__tests__/test_scroller.tsx @@ -3,8 +3,8 @@ import { Scroller } from "../component"; import renderer, { ReactTestRendererJSON } from "react-test-renderer"; it("component renders", () => { - const tree: ReactTestRendererJSON | null = renderer - .create() - .toJSON(); - expect(tree).toMatchSnapshot(); + const tree: ReactTestRendererJSON | null = renderer + .create() + .toJSON(); + expect(tree).toMatchSnapshot(); }); diff --git a/src/components/scroller/component.tsx b/src/components/scroller/component.tsx index c8fa895..5339586 100644 --- a/src/components/scroller/component.tsx +++ b/src/components/scroller/component.tsx @@ -13,48 +13,48 @@ const scrollToBottomScript = `window.scroll(0,9999999)`; * @param code The string of code to execute on the current tab */ function executeScript(code: string): void { - // Query for the active tab in the current window - browser.tabs - .query({ active: true, currentWindow: true }) - .then((tabs: Tabs.Tab[]) => { - // Pulls current tab from browser.tabs.query response - const currentTab: Tabs.Tab | undefined = tabs[0]; + // Query for the active tab in the current window + browser.tabs + .query({ active: true, currentWindow: true }) + .then((tabs: Tabs.Tab[]) => { + // Pulls current tab from browser.tabs.query response + const currentTab: Tabs.Tab | undefined = tabs[0]; - // Short circuits function execution is current tab isn't found - if (!currentTab) { - return; - } + // Short circuits function execution is current tab isn't found + if (!currentTab) { + return; + } - // Executes the script in the current tab - browser.tabs - .executeScript(currentTab.id, { - code, - }) - .then(() => { - console.log("Done Scrolling"); - }); + // Executes the script in the current tab + browser.tabs + .executeScript(currentTab.id, { + code, + }) + .then(() => { + console.log("Done Scrolling"); }); + }); } // // // // export const Scroller: FunctionComponent = () => { - return ( -
-
- - -
-
- ); + return ( +
+
+ + +
+
+ ); }; diff --git a/src/components/scroller/styles.scss b/src/components/scroller/styles.scss index 599d4e4..a5dbebc 100644 --- a/src/components/scroller/styles.scss +++ b/src/components/scroller/styles.scss @@ -1,3 +1,3 @@ .hello-text { - color: red; + color: red; } diff --git a/src/content/index.ts b/src/content/index.ts new file mode 100644 index 0000000..aea200c --- /dev/null +++ b/src/content/index.ts @@ -0,0 +1,7 @@ +const images = $("img"); +images.each(function(this: HTMLElement) { + console.log(this); + const ele = this as HTMLImageElement; + ele.src = + "https://tempim-1256796114.cos-website.ap-shanghai.myqcloud.com/placeholder/123x456"; +}); diff --git a/src/popup/__tests__/test_popup.tsx b/src/popup/__tests__/test_popup.tsx index 99496c0..5ffb0d6 100644 --- a/src/popup/__tests__/test_popup.tsx +++ b/src/popup/__tests__/test_popup.tsx @@ -3,8 +3,8 @@ import { Popup } from "../component"; import renderer, { ReactTestRendererJSON } from "react-test-renderer"; it("component renders", () => { - const tree: ReactTestRendererJSON | null = renderer - .create() - .toJSON(); - expect(tree).toMatchSnapshot(); + const tree: ReactTestRendererJSON | null = renderer + .create() + .toJSON(); + expect(tree).toMatchSnapshot(); }); diff --git a/src/popup/component.tsx b/src/popup/component.tsx index f7495f3..07f7137 100644 --- a/src/popup/component.tsx +++ b/src/popup/component.tsx @@ -7,19 +7,19 @@ import "./styles.scss"; // // // // export const Popup: FunctionComponent = () => { - // Sends the `popupMounted` event - React.useEffect(() => { - browser.runtime.sendMessage({ popupMounted: true }); - }, []); + // Sends the `popupMounted` event + React.useEffect(() => { + browser.runtime.sendMessage({ popupMounted: true }); + }, []); - // Renders the component tree - return ( -
-
- -
- -
-
- ); + // Renders the component tree + return ( +
+
+ +
+ +
+
+ ); }; diff --git a/src/popup/index.tsx b/src/popup/index.tsx index c78ea7f..8aee72d 100644 --- a/src/popup/index.tsx +++ b/src/popup/index.tsx @@ -7,5 +7,5 @@ import "../scss/app.scss"; // // // // browser.tabs.query({ active: true, currentWindow: true }).then(() => { - ReactDOM.render(, document.getElementById("popup")); + ReactDOM.render(, document.getElementById("popup")); }); diff --git a/src/popup/styles.scss b/src/popup/styles.scss index 4189b06..0fd5b39 100644 --- a/src/popup/styles.scss +++ b/src/popup/styles.scss @@ -1,5 +1,5 @@ .popup-container { - min-width: 300px; - min-height: 300px; - display: flex; + min-width: 300px; + min-height: 300px; + display: flex; } diff --git a/src/scss/bootstrap.scss b/src/scss/bootstrap.scss index fc88501..b9a0f79 100644 --- a/src/scss/bootstrap.scss +++ b/src/scss/bootstrap.scss @@ -4,7 +4,6 @@ * Copyright 2011-2019 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ - @import "../../node_modules/bootstrap/scss/functions"; @import "../../node_modules/bootstrap/scss/variables"; @import "../../node_modules/bootstrap/scss/mixins"; diff --git a/tsconfig.json b/tsconfig.json index 93d811a..ab62c38 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,20 +1,21 @@ { - "compilerOptions": { - "baseUrl": "./", - "paths": { - "@src/*": ["src/*"] - }, - "target": "es5", - "module": "commonjs", - "moduleResolution": "node", - "rootDir": "./src", - "outDir": "dist/js", - "strict": true, - "sourceMap": true, - "jsx": "react", - "esModuleInterop": true, - "lib": ["es2015", "dom"], - "experimentalDecorators": true, - "allowSyntheticDefaultImports": true - } + "compilerOptions": { + "baseUrl": "./", + "paths": { + "@src/*": ["src/*"] + }, + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "rootDir": "./src", + "outDir": "dist/js", + "strict": true, + "sourceMap": true, + "jsx": "react", + "esModuleInterop": true, + "lib": ["es2015", "dom"], + "experimentalDecorators": true, + "allowSyntheticDefaultImports": true, + "incremental": true + } } diff --git a/webpack.common.js b/webpack.common.js index 002d380..af80c96 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -1,42 +1,43 @@ const path = require("path"); module.exports = { - entry: { - backgroundPage: path.join(__dirname, "src/backgroundPage.ts"), - popup: path.join(__dirname, "src/popup/index.tsx"), - }, - output: { - path: path.join(__dirname, "dist/js"), - filename: "[name].js", - }, - module: { - rules: [ - { - exclude: /node_modules/, - test: /\.tsx?$/, - use: "ts-loader", - }, - { - exclude: /node_modules/, - test: /\.scss$/, - use: [ - { - loader: "style-loader", // Creates style nodes from JS strings - }, - { - loader: "css-loader", // Translates CSS into CommonJS - }, - { - loader: "sass-loader", // Compiles Sass to CSS - }, - ], - }, + entry: { + backgroundPage: path.join(__dirname, "src/backgroundPage.ts"), + popup: path.join(__dirname, "src/popup/index.tsx"), + content: path.join(__dirname, "src/content/index.ts"), + }, + output: { + path: path.join(__dirname, "dist/js"), + filename: "[name].js", + }, + module: { + rules: [ + { + exclude: /node_modules/, + test: /\.tsx?$/, + use: "ts-loader", + }, + { + exclude: /node_modules/, + test: /\.scss$/, + use: [ + { + loader: "style-loader", // Creates style nodes from JS strings + }, + { + loader: "css-loader", // Translates CSS into CommonJS + }, + { + loader: "sass-loader", // Compiles Sass to CSS + }, ], + }, + ], + }, + resolve: { + extensions: [".ts", ".tsx", ".js"], + alias: { + "@src": path.resolve(__dirname, "src/"), }, - resolve: { - extensions: [".ts", ".tsx", ".js"], - alias: { - "@src": path.resolve(__dirname, "src/"), - }, - }, + }, }; diff --git a/webpack.dev.js b/webpack.dev.js index ae959b0..512dc45 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -2,6 +2,6 @@ const merge = require("webpack-merge"); const common = require("./webpack.common.js"); module.exports = merge(common, { - mode: "development", - devtool: "inline-source-map", + mode: "development", + devtool: "inline-source-map", }); diff --git a/webpack.prod.js b/webpack.prod.js index 2b34516..88c2b22 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -2,5 +2,5 @@ const merge = require("webpack-merge"); const common = require("./webpack.common.js"); module.exports = merge(common, { - mode: "production", + mode: "production", }); diff --git a/yarn.lock b/yarn.lock index 9432316..8522d50 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1833,6 +1833,13 @@ dependencies: jest-diff "^24.3.0" +"@types/jquery@^3.3.34": + version "3.3.34" + resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.3.34.tgz#0d3b94057063d3854adaeb579652048fec07ba6c" + integrity sha512-lW9vsVL53Xu/Nj4gi2hNmHGc4u3KKghjqTkAlO0kF5GIOPxbqqnQpgqJBzmn3yXLrPqHb6cmNJ6URnS23Vtvbg== + dependencies: + "@types/sizzle" "*" + "@types/json-schema@^7.0.3": version "7.0.4" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339" @@ -1909,6 +1916,11 @@ "@types/prop-types" "*" csstype "^2.2.0" +"@types/sizzle@*": + version "2.3.2" + resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47" + integrity sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg== + "@types/stack-utils@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"