Engineering's Log


Update D.20

23:00, we have automated away the permission setting for storage.

19:57, we just released plasmo 0.36.0-alpha.0 under the canary tag. This release marks our independence from Parcel's bundled HMR runtime. We implemented an HMR runtime that is focused on web extension development. Plasmo framework now triggers extension reload as you add new capability to your extension, such as new content script, etc... We have also enabled storing source code inside the src directory through our resolver.

11:25, we are reversing course to do some mining at the storage base. We will need to have more discussion as to how the content-scripts-ui interface should look like: API or export default? We are also thinking types of content script UI:

  • Popup mounted into specific DOM element which requires a generic mount API.
  • An overlay mounted above the current DOM - this makes default export most appropriate.


16:24, we released a new version of plasmo cli, with upgraded dependencies: v0.35.0. This update includes a new parameter for the init command and integration with our parcel resolver which cache remote scripts such as google analytics (discussed in our previous live session). The documentation has been updated.


17:00, we were live

12:12, we have managed to bypass a barrier introduced by the galatic federation when it comes to beaming data back to their analytic station from an orbiting vessel.


20:00, we are working on a parcel transformer to cache remote import. This should equip our framework with a better capability of supporting developer consuming global namespace library.


12:50, we are en-route to create a with-google-analytic example. It might be beneficial to create a module specifically for this purpose. This would also allow us to do some interesting thing - i.e, infering from the package to set the correct CSP.


Error logging in Plasmo CLI v0.32.0

19:41, we improved the error logging in plasmo cli, it should now points to the file, with the line number and column position. Released in v0.32.0.

17:00, we have finalized fixing up the issue on itero regarding a patch to our utils module, which made it including the fs nodejs module. We are resuming normal course, warp 8.


20:00, we released the plasmo repo.


Update C.19

17:00, we went live

15:40, we updated the environment schema to use a PLASMO_PUBLIC_ namespace for variable that will be passed down to the extension code. We think developer will appreciate that they can use the exact same env file for both their frontend and backend. We also fixed a bug with plasmo build command, that failed to inject the prod env file.


17:00, we updated @plasmohq/storage to v0.3.0, changing its API to be more consistent with the wider hook convention, while still allowing for flexibility with advanced usage. The new version also introduced a fix to the issue of mutating state on unmount.

13:10, we have identified a potential solution to npx plasmo init. It seems the npx cache could be at fault. Subtituing npx with npm x plasmo init solved the problem. We will reflect this finding in our documentations.

10:30, we are investigating the issue with npx plasmo init. Apparently, the package was installed, but no command was invoked. We suspect the issue lies within the bin specification that we were using - perhaps pnpm handle this more broadly than npm.


21:00, we have successfully setup a with-tailwindcss example, minimal change to our framwork, and the code is comparable to NextJS's with-tailwindcss example

17:00, we are investigating a tailwindcss integration with the plasmo framework.

16:00, we fixed the issue with bpp - the latest version of pupeteer (14.x), which deprecate node12 and is ESM by default, seems to have caused issue with the final bundle. We shall investigate this issue sometime in the future, but at the moment we will table this for now.


23:00, we are having trouble resolving the issue in bppv2 with the upgraded dependencies. The error is unclear, and the search result we found so far is not very helpful...

open source social badge

18:00, we updated the social badges for our open-source repositories.

16:00, we found the issue with bpp's recent migration from plasmo-corp to plasmohq. Apparently, we did not update the import path itself in our source files.

RED alert 11:20

0.23.0 is not working when invoked with any of the dlx runner, including pnpm. We are investigating what could have gone wrong with the recent build. An initial test would be to push out 0.24.0 and ensure it is not just the CI pipeline that is broken.

We were able to figure out the issue with the help of @wahVinci who was the first to report the issue. After looking through the verbose log, we found that plasmo cli halted upon trying to get the main package manager on the current system. Further investigation in a linux VM using multipass shown that there was a try/catch leak due to a syncronous fall-through of the spawn code used to get the package manager version. In particular, this code:

try {
  return getPMInfo("pnpm")
} catch {
  return getPMInfo("yarn")

getPMInfo is an async function that spawn the package manager command asking for its version, and it will throw if the package manager is not installed. However, since we are returning the promise immediately, the try/catch block was not able to catch the error thrown by getPMInfo. A fix was simply to await for it:

try {
  return await getPMInfo("pnpm")
} catch {
  return await getPMInfo("yarn")

This would ensure that the error are within the run scope of the try/catch block.

CANCEL RED alert 14:00


22:15, we added keys.json to the ignored list to support the bpp workflow. This change will be published in 0.23.0

22:00, we added bpp as the recommended way to publish extension via github action to the framework initialized scaffolding. We have also added a --zip flag to our build command, which will produce a zip ready to submit to the stores. This will all be released under 0.22.0. On another note - bpp is having trouble with the latest github actions API on input parsing. We will need to look into how it is processing the default values.

20:30, we found a bug with the way we setup HMR for our content-script. Apparently, we forgot to set the host to localhost. Live-reload for content-script is now functional! - Released in 0.22.0.

19:30, we just added a new capability for our framework to parse env files, using a similar cascading/overiding strategy to NextJS. Released in 0.22.0, with-env-files, docs.

17:00, we are working on parsing .env for plasmo framework - it seems that the web extension plugin ignored the parsing of the env. We will need to investigate this code path to verify our hypothesis, but for the time being, trying out using env file does not work as expected.


Update B.18

17:00, we are live.

14:30, we revamped the docs page, utilizing the latest nextra version.

12:50, we published a with-background example


23:10, we have published a couple new examples demonstrating plasmo:

19:40, we are refactoring storage to parse data in storage, using a similar strategy to use-hashed-state. The end user can now use the hook with proper data type - an example is with-storage.

09:40, we removed some unused commands from the plasmo template. We are now full thrustle toward creating examples.


20:24, we resolved the issue with react library dependency. The solution was to make sure for library project, react and related packages are stored as devDependencies instead of dependencies, otherwise if the version of react installed mismatches between the consumer and the library, react will throw the error below:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See link/invalid-hook-call for tips about how to debug and fix this problem.

16:44, we resolved the issue with [slug] linking in our navigation. Apparently, router.pathname does not return the hydrated uri - you need to use router.asPath instead.

14:50, we refactored our internal scripts packages to have a static bin directory to be referenced by pnpm on post-install. Due to some limitation with esbuild, and we're waiting for this care package to land at tsup, we decided to use cjs for the bin runner, which works for the time being. We do expet some ESM migration in the future.

13:37, we are studying some code from the egoist shuttle. Particularly interesting is the use of esbuild to extract configurations from any module files with bundle-require.

12:00, we were halted by an issue with the git submodule worktree that caused git to not register changes in submodules. An upgrade of git fixed the issue.

11:00, we updated the framework doc.


15:00, we are removing renovate from some of our monorepo, as it does not update the lockfile properly to initiate a successful CI build. And since we are managing our dependencies manually with our own update flow, this should not impact our works.

14:30, we are renaming plasmo-corp organization to plasmohq across all of our communication channels, effective immediately.

13:00, we added a watch method to our storage module, which simplify the onChanged listener of chrome storage. We have also derived a strategy to automatically infer the manifest permission needed for new extensions.

06:22, we just released storage module.


23:00, we are investigating jest test environment for browser extension. Perhaps a good starting point is some simple mocking. In the future, we will likely want to fork jest-environment-jsdom for an browser extension focused test envirnoment.

03:03, we added the capability for cli to open the itero install link on setup - released in 0.21.0.


12:00, we are taking a rest today.


Update A.17

14:30, we have added new capability to the plasmo cli standalone version to consume an environment variable which contains the extension id for beta testing with itero.

12:20, we added the ability to upsert new zip file into an existing extension for itero, released in 0.5.0.

11:10, we implemented a dynamic binary generator for cli binary, which will be used to streamline testing for our extensions.


14:30, we fixed the issue with plasmo cli's dependency tree (it needed to bundle an internal package), which will go live in 0.20.0

06:30, we piped the dependency installation log from plasmo init to the main stdio - this will be released in 0.19.0.

plasmo cli section on fronti

05:20, we replaced the itero section of fronti with plasmo init.


14:00, we added feed buttons to our log index (rss, atom and json). We also refactored the feed generator to support business log as well.

12:40, we refactored our legal pages to use the same nextjs SSG templates.

Production lighthouse score

12:00, it seems the low performance issue only occurs in our local development environment. Our production score are all above 90.

11:00, we found a weird bug regarding react 18 and nextjs rehydration, when our mdx is compiled, the img component turned into an image wrapped inside a paragraph. An S.O discussion can be found here.

 engineering screenshots 2022-05-05-10-43-21.png

10:40, we are investigating the issue surrounding our privacy and tos pages. The performance is quite abysmal - we are looking for ways to make it loads faster.

06:00, the vulcan base now have the capability to launch AI assessment.

03:00, we are investigating the issue with edge run-time not able to proxy our requests on vulcan. The quick solution is to simply migrate the failing edge function over to full lambda.


19:15, we revamped the github section of fronti.

17:15, we added a short url index for our subspace project.

16:19, we delivered a dynamic tile viewing for vulcan, released in v0.6.0. We also revamped the slider styling to work better with large set of date (100 items).

13:37, we found that the nextjs starsystem had deprecated Buffer from their Edge middleware engine altogether and is now showing an error upon usage locally. We have delivered a care package to their example planet to mitigate the issue, replacing Buffer with atob.

09:00, we just learned about the issue regarding api route in the NextJS starsystem - apparently they are insecure to server-side request by default. Our auth middleware should be sufficient to prevent rough request. Future development will likely requires OAuth2 with JWT verification.


13:45, we just delivered another guidance system to vulcan base - a persistent state using our newly released use-hashed-state hook, as well as a simple implementation of router query parsing and updating (for map state sharing via URL, similar to the galatic empire's navigation system).

04:52, we are investigating the nova explosion happening over at the testing-library starsystem. It seems that the planet react-testing-library is beginning to absorb its own moon react-hooks-testing-library. On the other hand, the jest planet had ejected its base jest-environment-jsdom into a moon.

02:30, we are slowly migrating some of our internal hooks into the p1asm0 subspace, to be reused in vulcan. The first of the bunch is use-hashed-state - a typescript fork of use-persisted-state-hook - which we have been using in our SOC2 checklist.


08:44, we just released p1asm0 - a super-repo for managing dependencies across our open experimentation and open source libraries. The core usage is to align package versioning with centralized upgrades and publishing flow.

04:55, we are wrapping up some business on the vulcan base. We implemented tile layer rendering, proper markers, refining the footer/attribution section, as well as a poor-man's auth with static username and password.

03:30, we fixed a minor bug in fronti regarding the layout of the browser listing section.


13:00, we resolved a bug with the coordinate marking feature in vulcan, where the end marker was not captured properly on the click event, but rather delegated to the hover event.

12:00, we are suffering from power outtage - hope to be back online soon.

11:44, we have just implemented a slider picking feature on vulcan, as well as refactoring the api handling to use next-connect. We added a common origin checker middleware. We have also integrated puro to reduce boilerplate context setup. Lastly, we are investigating tile server proxying using the TileLayer getData api. Seems to be quite straight-forward: we simply supply the base URL, then with the template URL generated, we use that to call our internal tile API for the appropriate bitmap.

 assets xview-vulcan.png

08:40, we released puro, under MIT licensed source here. It is a simple utility library to create react context/provider with proper typing inference. It will be used in Vulcan.



Back to Engineering Quarter