Skip to content

Instantly share code, notes, and snippets.

@Moizsohail
Moizsohail / aliasResolver
Created July 25, 2023 07:21
This is a utilitly program allowing you to swap relative paths to the shortest tailwind alias by reading the tsconfig.json
/* eslint-disable no-console */
/*
Alias Absolute Resolver
This is a utilitly program allowing you to swap relative paths to the shortest tailwind alias.
How to run?
npx ts-node aliasAbsolver.ts
*/
const fs = require('fs');
const { exit } = require('process');
@Moizsohail
Moizsohail / aliasResolver
Created July 25, 2023 07:20
This is a utilitly program allowing you to swap relative paths to the shortest tailwind alias by reading the tsconfig.json
/* eslint-disable no-console */
/*
Alias Absolute Resolver
This is a utilitly program allowing you to swap relative paths to the shortest tailwind alias.
How to run?
npx ts-node aliasAbsolver.ts
*/
const fs = require('fs');
const { exit } = require('process');
@Moizsohail
Moizsohail / content.ts
Created March 3, 2022 19:28
Chrome Extension In React With NPM Modules: Part 3 ii
import {
ChromeMessage,
ChromeMessageExecute,
MessageResponse,
MessageTypes,
} from "../types";
import { say } from "cowsay";
const messagesFromReactAppListener = (
message: ChromeMessage,
sender: chrome.runtime.MessageSender,
@Moizsohail
Moizsohail / content.ts
Last active March 3, 2022 19:16
Chrome Extension In React With NPM Modules: Part 3
import {
ChromeMessage,
ChromeMessageExecute,
MessageResponse,
MessageTypes,
} from "../types";
import { say } from "cowsay";
const messagesFromReactAppListener = (
message: ChromeMessage,
sender: chrome.runtime.MessageSender,
@Moizsohail
Moizsohail / Home.tsx
Last active March 3, 2022 18:41
Chrome Extension In React With NPM Modules: Part 3
import React, { useState } from "react";
import { Button, Container, FormControl, Navbar } from "react-bootstrap";
import { sendMessage } from "../messaging";
import { MessageTypes } from "../types";
const Home = () => {
//---- new ----
const [text, setText] = useState("");
const handleChange = (e: any) => {
setText(e.target.value);
@Moizsohail
Moizsohail / background.ts
Last active March 3, 2022 16:07
Chrome Extension In React With NPM Modules: Part 2
import { sendMessage } from "../messaging";
import { MessageTypes } from "../types";
try {
chrome.commands.onCommand.addListener((command) => {
if (command === "execute") {
sendMessage(MessageTypes.shortcutExecute);
}
});
// this is to check if there are any conflicts in your
@Moizsohail
Moizsohail / package.json
Last active March 3, 2022 12:51
Chrome Extension In React With NPM Modules: Part 2
"scripts": {
"build": "INLINE_RUNTIME_CHUNK=false GENERATE_SOURCEMAP=false react-scripts build && rm -rf dist/* && mv build/* dist && rollup --config rollup.config.js",
"dev": "npm-watch build"
},
@Moizsohail
Moizsohail / messaging.ts
Created March 3, 2022 08:28
Chrome Extension In React With NPM Modules: Part 2
import { MessageTypes } from "./types";
export const sendMessage = (
messageType: MessageTypes,
payload?: object | null,
callback?: any
) => {
if (!payload) payload = {};
chrome.windows.getCurrent((w) => {
chrome.tabs &&
@Moizsohail
Moizsohail / manifest.json
Last active March 3, 2022 16:03
Chrome Extension In React With NPM Modules: Part 2
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["./static/js/content.js"],
"all_frames": false,
"run_at": "document_end"
}
],
"background": { "service_worker": "./static/js/background.js" },
"commands": {
@Moizsohail
Moizsohail / type.ts
Last active March 3, 2022 15:56
Chrome Extension In React With NPM Modules: Part 2
export enum MessageTypes {
execute,
}
export interface ChromeMessageDefault {
type: MessageTypes;
}
export interface ChromeMessageExecute {
type: MessageTypes.execute;
text: string;