computeroreo.blogg.se - Chrome workspaces

#Chrome workspaces code#

In the following, I will show you a few examples, along with source code for each example, and hopefully, these examples will inspire you to create your Chrome extension. They are specialised for a generic React or Redux project, yet not specialised enough for your personal or your teams' development workspace.

Redux Devtools for debugging Redux store and time travel.

React Devtools for debugging React Virtual DOM.

json files in Chrome, and there are a lot more extensions that made my development work easier, which I listed at the end of this article.Īs you can see, these extensions are specialised and helpful in a certain aspect of my development: Besides that, I've been using EditThisCookie for cookie management, JSON Formatter has been helping me with inspecting. I don't know about you, but React DevTools and Redux DevTools have been extremely helpful for my daily React development. Now, let's see what kind of Chrome extension we can develop that can help us with our daily development.

You can check out my repo for a basic Chrome extension setup that includes all the code above.Ĭongrats, we've cleared through the arguably hardest part developing Chrome extension! Manifest.json is where you declare everything about the chrome extension: Now you know the different components of a Chrome extension, let's look at the most important file in every extension, the manifest.json. custom pages (Overriding the History, New Tab, or Bookmarks page).devtools panel (a new panel in the devtools).context menu (yes, you can customise your right-click context menu).popup (the floating window shown when clicked on the toolbar icon).browser action (the small icon in the toolbar beside the address bar).The UI elements are what we usually perceived of a chrome extension, which includes: Options page is a standalone page, where users can modify the behavior of your Chrome extension. It is where you provide web pages information to the extension, as well as providing hooks for the web pages to communicate with the extension. It is allowed to access and modify the DOM of the web pages. It is where you can observe browser events and modify browser behaviors.Ĭontent scripts run in the context of web pages. The background scripts is like a background thread of your Chrome extension. OverviewĪ Chrome extension is made up of several components, which can broken down into the background scripts, content scripts, an options page, UI elements. Hopefully, at the end of the talk, you would be able to write your Chrome extension for your development workspace. In this talk, I will be exploring how you can develop your Chrome extension, and how you can use it to improve your development workflow. One good example is React DevTools, which allows React Developers to inspect and debug virtual DOM through the Chrome DevTools. AbstractĬhrome extension allows us to add features to our browser, personalize our development experience.

Still, I feel this talk deserves to be "heard" by everyone interested, so I decided to write the talk out into writing. Unfortunately, due to the Coronavirus Outbreak, and having the Ministry of Health raising the alert to DORSCON Orange, the event was cancelled. I prepared this talk for Chrome Dev Summit Extended 2020 in Singapore. Extensions that has helped my daily development.Switching environments and feature toggles.Communicating between the Content script and the web page.👥 Chrome Developer Summit Extended (Cancelled).Personalised Development Workspace With Chrome Extension