nicosh / chrome-dev-newtab

A dev friendly new tab for Google Chrome.

Chrome Dev Newtab

A dev friendly new tab for Google Chrome.
Google chrome extension that turn a new tab into a productive dashboard.

🚧 Features 🚧 :

• Works offline ✅
• Show memory and cpu usage ✅
• Google or Stackoverflow search bar ✅
• Easily delete browser data ✅
• Easy access to the browser history ✅
• Javascript sandbox ✅
• Kanban board (with local storage data persistence) ✅
• Lighthouse integration ✅
• Markdown editor (with local storage data persistence) ✅
• Github ready ✅
• Trending posts from CS related subreddits ✅
• Light and dark theme ⏳

Installation

• Go to chrome://extensions/ and check the box for Developer mode in the top right.
• Download and unzip extension.zip from the last release
• Drag and drop the dist folder into extensions tab
• Activate the extension

Development

Since Chrome apis cannot be used outside extension scope (chrome-extension://) you cannot run the app as you would normally do with a react application.

• Go to chrome://extensions/ and check the box for Developer mode in the top right.
• Fork the repo and clone it locally
• Install dependencies with npm install.
• Do a build first with npm run build
• Run npm run start
• In another shell tab run npm run watch
• Open extensions tab in google chrome
• Drag and drop the build folder into extensions tab
• Activate the extension
• Start coding

Every time you make a change inside the src folder npm run watch will make a new build and you just need to refresh the tab for see changes.

chrome-dev-newtab's Issues

Used cpu is (probably) showing wrong percentage

The % of CPU used is never changing and is probably different from the real one.

To reproduce
Open your system task manager, the % of used CPU will be different from the one showed in the top right corner of the plugin.

Relevant code
Docs

color of output of javascript sandbox need to changed on dark theme.

The color of the javascript sandbox output is black for both light and dark modes.
This should be matched as per the theme applied.

Improve dark theme

Body background in dark mode should be #121212
Cards background should be #272727
Searchbar text should be #fff

Any other suggestion / improvement is welcome (ex. change link colors)

Change Todo section colors in dark mode

While in dark mode the Todo cards colors should be changed to match the dark theme.

Change notes editor colors in dark mode

While in dark mode the editor colors should be changed to match the dark theme.

Fix dark theme

At the moment dark theme needs some tweaks :

1. Performance chart labels are not changing color
2. Tabs labels are not changing color
3. Reddit title section is not changing color

Every time after refreshing current tab or opening a new tab, the page get switched to light mode.

The state of light/dark mode should not get changed after refreshing existing tabs or on opening a new tab.
Chrome/local storage can be used to retrieve the user's last saved state.

Change Lighthouse section labels colors in dark mode

Lighthouse labels (performance, accessibility, best-practices, seo, pwa) should change color in dark mode.

Problem when opening Todo Tab

When clicking on todo open blank page.

This is the report from devtools

SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) at main.c7b55b5f.chunk.js:1 at Ic (2.f518325e.chunk.js:2) at t.unstable_runWithPriority (2.f518325e.chunk.js:2) at Uo (2.f518325e.chunk.js:2) at Pc (2.f518325e.chunk.js:2) at 2.f518325e.chunk.js:2 at R (2.f518325e.chunk.js:2) at MessagePort.w.port1.onmessage (2.f518325e.chunk.js:2)

use chrome.storage instead that localStorage

Use chrome apis chrome.storage for storage purposes instead that localStorage everywhere is needed.

Ex :

chrome-dev-newtab/src/components/todo/index.js

Line 31 in 486de78

let savedBoard = localStorage.getItem("board") ? localStorage.getItem("board") : defaultBoard;

chrome-dev-newtab/src/components/context/appContext.js

Line 7 in 486de78

const currentTheme = localStorage.getItem("theme") || "light";

chrome-dev-newtab/src/components/context/appContext.js

Line 25 in 486de78

localStorage.setItem('theme', newTheme);

chrome-dev-newtab/src/components/todo/index.js

Line 37 in 486de78

localStorage.setItem('board', newBoard);

chrome-dev-newtab/src/components/misc/github/index.js

Lines 6 to 7 in 486de78

	const gitUser = localStorage.getItem("git_username");
	const gitToken = localStorage.getItem("git_token");

chrome-dev-newtab/src/components/misc/github/index.js

Lines 52 to 74 in 486de78

	if (response.status != 200) {
	localStorage.removeItem("git_username");
	localStorage.removeItem("git_token");
	setError(true)
	setErrorMessage("Error")
	setData(false)
	} else {
	let data = await response.json()
	if (reposListType === 1) {
	data = data.data.user.repositories.nodes
	}
	if (n) {
	localStorage.setItem('git_username', n)
	} else {
	localStorage.removeItem("git_username");
	}
	if (t) {
	localStorage.setItem('git_token', t)
	} else {
	localStorage.removeItem("git_token");
	}

chrome-dev-newtab/src/components/editor.js

Lines 9 to 20 in 486de78

	useEffect(()=>{
	let text = localStorage.getItem("notestext") || "Write something...";
	setNotes(text)
	},[])
	const onChange = (value) => {
	localStorage.setItem('notestext', value);
	setNotes(value);
	};
	return <SimpleMDE value={notes} onChange={onChange} />
	}