About a month ago I started this blog and exploring the idea of utilizing NFT's to prove ownership of content.

The result is an nx monorepo that contains a chrome extension, a nextjs app, and a solidity contract.

This project was a learning experience for me and not something I intend to publish to the Chrome Web Store.

It's been a fun experience learning some new things and brushing up on some old. I've clearly increased my public github profile over that time and hope to continue doing so on new projects.

The web3 app is hosted at https://nft.j5s.dev.

The mental model of content today means you publish when you are done. It means you must be perfect, you must be someone of authority to be taken seriously, or at least self aware and disclose that you are not. Unintended errors, incomplete works are looked at negatively and discouraged. What if this was different? What if we published on save? What if we become self aware, vulnerable yet resistent to the world and accepted feedback for when we are wrong or incomplete? What if our primary goal was to learn, not to summarize, analyze, dissect or preach?

What if we were never "done" with a blog post or a book? What if we versioned it and maintained it like we do software? Code is Poetry after all, right?

We would have more insights into the author, a closer connection to their mind. As opposed today, a world of violent words at war with polarizing viewpoints written to take a side. The New York Times ("the authority") wrote a "hit" piece on Bitcoin. Pick your team as you read and hate or love the article. This mental model is passive aggressive at best.

What if when we saw mistakes in the "facts" we read, we submitted changes like we do Pull Requests? What if as authors we were ok with being wrong (unintentionally)? What if we thought of ourselves like editors to our own content and writers that that of which we read? It would be a much better world to learn and communicate in for sure. But no, today we pay hundreds of thousands of dollars to go to college and be trained by the "smartest", most educated among us who have authority over us so that one day we can be educated and experts in a field too. Only then, at the end of the road, are we complete...until we're not. Even Einstein was wrong at times.

What if we were not judged on the outcome of a single piece of work or performance in a game? What if we were judged on how far we have changed. If "most improved" award winners were the real MVP's. What if we tracked it and the change was just as important as the content itself. If all you ever do is focus on improving yourself vs yesterday, as a society we will thrive. When in reality those who are not the MVP often lose passion because they are not the best.

The mental model today is wrong. I'm far from perfect and certainly not the best in anything. Why must I attempt to be perfect when I speak, write, or publish. Why am I offended when others "correct" me. It should be seen as additional perspective to learn from or ignore.

What if we never stopped thinking of ourselves as students and our creations were malleable to thoughts of others, their views, and their words? Our writings are not carved on cave walls like they used to be. We are in a digital age with technology that facilitates change. Let's change.

You may think website is not professional. The homepage is the content from https://docusaurus.io/ after installing it. I have not gotten around to making it my own...yet. Why wait to publish? Why not allow others to contribute?

The new mental model is distributed, selfless, passionate, and open to change. It can still be negative, but the negativity is aimed at those of us who claim authority, who are not open to feedback, who publish finished and perfect works. Not many articles, books, or words stand the test of time. Why must we claim to be right, like its a truth that spans eternity? It is clear our views change over long periods of time, but in the short term we are absolute in what we know. It doesn't add up.

Chrome Extension Update​

In my previous post I added a few customizations to a great boilerplate library for creating a chrome extension with React. However, after running into webpack errors (such as this one) with websockets and HMR I've decided to leverage a new boilerplate - chrome-extension-boilerplate-react-vite. Its got all the features of the previous one except runs on Vite for local development.

I've created a template for myself for future extensions with the additional usePersistedState hook as previously described.

Customizations​

I've extended this extension boilerplate with a couple new features in my fork:

• Jest unit tests
• Tailwind
• Persistent state utility
• Message passing utility

You can see all my changes here. Persistent state and message passing between the background script and other pages was important for me to setup as it can get complex. To do this I created custom hook usePersistedState

usePersistedState()​

Example use:

import React from 'react'
import { usePersistedState } from '../../common/msg/usePersistedState';
export function Counter() {

  const { value, actions } = usePersistedState<number>('counter', 0);

  return (
    <div className="flex justify-center">
      <div className="flex items-center">
        <button
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          aria-label="Increment value"
          onClick={() => {
            actions.setState(value + 1);
          }}
        >
          Increment
        </button>
        <span className="px-4">{value}</span>
        <button
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          aria-label="Decrement value"
          onClick={() => {
            actions.setState(value - 1);
          }}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

Chrome Extension Setup​

After about 30 minutes or so of research I've decided to go with lxieyang/chrome-extension-boilerplate-react. It doesn't have everything I want, but it also doesn't have a lot of things I don't want.

Features​

New page​

When opening a new tab you can set the webpage for the user:

Dev Tools Panel​

Popup​

Settings Page / options​

Content​

There is a content module to run JS on the page the user is on.

background​

There is a background page for background tasks for managing events.

Bugs / Gotchas​

The webpack dev server will cause lots of issues on other sites. I had to disable the extension when trying to do other things such as asking ChatGPT questions or Googling.

I did find a solution for this one specific issue but didnt spend time figuring out how to fix google search from infinitely reloading the browser when the dev server is running.

A good workaround is to create a new profile in chrome and develop the extension in that sandbox and do everything else in your default profile.

Whats missing​

• unit tests
• e2e tests
• much is written in js, not typescript
• tailwind

Conclusion​

All in all seems like a good minimal solution to an extension setup. Downside (or upside depending on your perspective) is it doesn't make many decisions around UI styling, message passing or state management. I'm going to need to add a few libraries as I go to customize this to my liking.

A New Project Idea​

This blog is going to be a rambling of my thoughts in my journey to learn new software.

The first problem that comes to mind with a blog is content theft. If I write original content I want to make sure unoriginal individuals don't come along and steal it. Cause I know they will, it would be great to have a way to prove I am the original author. NFT's seem like a good use case for this problem.

The solution: After I publish a page I will mint an NFT that will contain:

• the url of the content
• the html content of the page in text
• hash of html text
• a screenshot of the page

The page will contain a metatag such as:

<meta name="ethereum-address" content="0x1234567890abcdef">

This will be done by a chrome plugin that when activated will look for the meta tag and

• sign a transaction as that wallet owner
• create the data (above) and send it to Arweave
• create the NFT on network (polygon?)

The Parts​

Chrome Extension​

Chrome extensions can be complex in their different environments. From background scripts to popovers it can get messy fast. Ideally i want something like getAlby but would prefer not recreating it all from scratch. Requirements:

• React
• typescript
• e2e tests
• unit tests
• prettier

I don't want to build from scratch and know a few exist:

• chrome-extension-boilerplate-react
• tomzhu1024/webpack-boilerplate-chrome

This will be something i can re-use anytime I want a chrome extension. It will be considered done when:

• clicking the extension opens up a popover that has a button which upon clicking executes javascript on the page
• has e2e/unit tests
• Github Actions setup to test/build/deploy the plugin

Web3 Client Integration​

Part two of the work will be building the web3 integration to a network like polygon. This should also exist on its own and be a starting point for future projects. Requirements are:

• a mint button that
• copies all html from the page
• gets the url
• creates a hash of the text of the page
• A service to upload content to Arweave and return ID's for NFT
• mints the NFT using a script

Web3 Solidity Smart Contract​

The chrome extension must interact with the contract to mint the NFT. The contract must have

• A mint function
• unique hash for content
• store the url
• metadata with links to data on Arweave
• screenshot
• html

Integration​

Integrate the web3 client, smart contract into the extension for the full functionality of the project.

Future Steps​

I would like a way for users to validate that the page is the original content. Perhaps some sort of badge / js snippet to place on the page that would show the user the content is original.

Some sort of service that automates dmca notices to websites that steals my content. Perhaps the badge and service could be something I can resell?