Merge

Author: ayoung19

README.md

@@ -1,11 +1,11 @@
 <p align="center">
-  <a href="https://csgofloat.com/">
-    <img width="600" src="https://csgofloat.com/assets/full_logo.png"/>
+  <a href="https://csfloat.com/">
+    <img width="600" src="https://csfloat.com/assets/full_logo.png"/>
   </a>
 </p>
 
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/Step7750/CSGOFloat/LICENSE)
-[![Website](https://img.shields.io/website-up-down-green-red/https/csgofloat.com.svg)](https://csgofloat.com)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/csfloat/extension/LICENSE)
+[![Website](https://img.shields.io/website-up-down-green-red/https/csfloat.com.svg)](https://csfloat.com)
 [![Chrome Web Store](https://img.shields.io/chrome-web-store/d/jjicbefpemnphinccgikpdaagjebbnhg.svg)](https://chrome.google.com/webstore/detail/csgofloat-market-checker/jjicbefpemnphinccgikpdaagjebbnhg)
 [![Chrome Web Store](https://img.shields.io/chrome-web-store/stars/jjicbefpemnphinccgikpdaagjebbnhg.svg)](https://chrome.google.com/webstore/detail/csgofloat-market-checker/jjicbefpemnphinccgikpdaagjebbnhg)
 [![Chrome Web Store](https://img.shields.io/chrome-web-store/rating-count/jjicbefpemnphinccgikpdaagjebbnhg.svg)](https://chrome.google.com/webstore/detail/csgofloat-market-checker/jjicbefpemnphinccgikpdaagjebbnhg)
@@ -34,6 +34,26 @@ CSGOFloat has an extension for Firefox/Chrome that lets you fetch floats directl
 
 Please see [`src/`](/src/README.md) for an overview of how the extension works and underlying tech. Contributions are welcome!
 
+### How to Build (Release)
+
+> `npm install`
+> 
+> `npm run build`
+
+The resultant build will be in the `dist/` directory.
+
+Note: You can also use `npm run build_ff` for Firefox
+
+### How to Build (Development)
+
+> `npm install`
+> 
+> `npm run start`
+
+Load the `dist/` directory as a temporary extension in Chrome. Code changes will automatically trigger a re-build.
+
+Note: You can also use `npm run start_ff` for Firefox
+
 ## Changelog
 
-See [Releases](https://github.com/csgofloat/extension/releases) for release notes.
+See [Releases](https://github.com/csfloat/extension/releases) for release notes.

manifest.json

@@ -1,9 +1,9 @@
 {
     "manifest_version": 3,
-    "name": "CSGOFloat Market Checker",
-    "short_name": "CSGOFloat",
-    "version": "3.1.0",
-    "description": "Dedicated API for fetching the float value, paint seed, and screenshots of CS:GO items on the Steam Market or Inventories",
+    "name": "CSFloat Market Checker",
+    "short_name": "CSFloat",
+    "version": "3.2.0",
+    "description": "Shows the float value, paint seed, and screenshots of Counter-Strike (CS:GO & CS2) items on the Steam Market or Inventories",
     "icons": {
         "16": "icons/16.png",
         "48": "icons/48.png",

package-lock.json

@@ -1,14 +1,14 @@
 {
-    "name": "csgofloat-extension",
-    "version": "3.1.0",
+    "name": "csfloat-extension",
+    "version": "3.2.0",
     "description": "Dedicated API for fetching the float value, paint seed, and screenshots of CS:GO items on the Steam Market or Inventories",
     "main": ".eslintrc",
     "directories": {
         "lib": "src/lib"
     },
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/csgofloat/extension.git"
+        "url": "git+https://github.com/csfloat/extension.git"
     },
     "scripts": {
         "build": "webpack --env mode=prod browser=chrome --config webpack.config.js --stats-error-details",
@@ -22,9 +22,9 @@
     "author": "step7750",
     "license": "MIT",
     "bugs": {
-        "url": "https://github.com/csgofloat/extension/issues"
+        "url": "https://github.com/csfloat/extension/issues"
     },
-    "homepage": "https://github.com/csgofloat/extension#readme",
+    "homepage": "https://github.com/csfloat/extension#readme",
     "devDependencies": {
         "@types/chrome": "^0.0.193",
         "@types/firefox-webext-browser": "^111.0.1",

package.json

@@ -33,7 +33,7 @@ Typically, only being able to access the DOM (ie. HTML env) of the page is not e
 changes to the page for your extension.
 
 Historically, many extensions would use on-demand script injection into the page in order to retrieve a variable,
-call a function, or mutate page-JS state. This is what our extension [used to do](https://github.com/csgofloat/extension/blob/ca85d56e3b268330537daf6bc6be7837213cc7a4/lib/bridge.js)
+call a function, or mutate page-JS state. This is what our extension [used to do](https://github.com/csfloat/extension/blob/ca85d56e3b268330537daf6bc6be7837213cc7a4/lib/bridge.js)
 and what others like CSGO-Trader [currently do](https://github.com/gergelyszabo94/csgo-trader-extension/blob/216df0e4eb6c481c893426d2324b93da026e92d3/extension/src/utils/injection.js#L4) (as of 2022/10/01).
 
 Pros
@@ -50,13 +50,13 @@ Cons
 Since Steam's Content Security Policy restrictions are applied to the content script's AJAX requests, typically event messaging to the background
 script is done. The background script is not restricted and will perform the request for us and send back the result.
 
-This is the mechanism you'd need to use whenever you fetch an HTTPS resource (like `https://api.csgofloat.com`).
+This is the mechanism you'd need to use whenever you fetch an HTTPS resource (like `https://api.csfloat.com`).
 
 A naiive example would be:
 
 `content_script.js`
 ```javascript
-chrome.runtime.sendMessage({type1: 'https://api.csgofloat.com/?url=steam://....'}, (response) => {
+chrome.runtime.sendMessage({type1: 'https://api.csfloat.com/?url=steam://....'}, (response) => {
     // do something
 });
 ```
@@ -81,11 +81,11 @@ Cons
 * Type-checking is _hard_, easy to lose context of what you expect a request to return
 
 
-### How CSGOFloat's Extension Works
+### How CSFloat's Extension Works
 
 #### Accessing the Page's JS runtime
 
-Almost the entirety of CSGOFloat's Extension runs within the page context and **not** the content script.
+Almost the entirety of CSFloat's Extension runs within the page context and **not** the content script.
 
 This allows us to easily access page globals, call Steam's functions, override their functions. Additionally, this gives a clear
 consistent environment to think about as a developer.
@@ -99,7 +99,7 @@ script. This effectively tells Chrome to re-run the script, but in the page inst
 Now that our scripts run within the page, we still want to be able to make AJAX requests to other domains outside of
 Steam's Content Security Policy.
 
-CSGOFloat's Extension similarly uses the mechanism of making the actual request in a background script, but
+CSFloat's Extension similarly uses the mechanism of making the actual request in a background script, but
 creates an abstraction layer on top.
 
 Dubbed the "bridge", it allows for **type safe** request and response handling between the page and background script.
@@ -117,7 +117,7 @@ You can find more details in `/bridge`.
 When try to mutate a page, you also want the ability to create new UI components, potentially _reusing_ the styling
 on the page. For example, you'd create a component that shows the float for a given item.
 
-CSGOFloat's Extension uses Web Components via the library [Lit](https://lit.dev/). Each UI mutation is a separate
+CSFloat's Extension uses Web Components via the library [Lit](https://lit.dev/). Each UI mutation is a separate
 component that has its own state management and rendering logic.
 
 You can find our components in `/components`.

src/README.md

@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>CSGOFloat Background</title>
+  <title>CSFloat Background</title>
   <script type="module" src="./background.js"></script>
 </head>
 <body>

src/background_ff.html

@@ -1,8 +1,8 @@
-.csgofloat-stickers-container {
+.csfloat-stickers-container {
     float: right;
 }
 
-.csgofloat-easy-inspect {
+.csfloat-easy-inspect {
     position: absolute;
     height: 74px;
     width: 74px;
@@ -15,18 +15,18 @@
     font-size: 20px;
 }
 
-.market_recent_listing_row:hover .csgofloat-easy-inspect {
+.market_recent_listing_row:hover .csfloat-easy-inspect {
     display: initial;
 }
 
 /* Powers animation for shining float boxes */
-.csgofloat-shine {
+.csfloat-shine {
     overflow: hidden;
 }
 
 /* Based on https://jsfiddle.net/AntonTrollback/nqQc7/ */
-.csgofloat-shine:after {
-    animation: csgofloat-shine-frames 4s ease-in-out infinite;
+.csfloat-shine:after {
+    animation: csfloat-shine-frames 4s ease-in-out infinite;
     content: '';
     position: absolute;
     top: -110%;
@@ -46,7 +46,7 @@
     );
 }
 
-@keyframes csgofloat-shine-frames {
+@keyframes csfloat-shine-frames {
     50% {
         opacity: 1;
         top: -30%;

src/global.css

@@ -25,7 +25,7 @@ export async function ClientSend<Req, Resp>(handler: RequestHandler<Req, Resp>,
         return new Promise((resolve, reject) => {
             // @ts-ignore Bad types
             runtimeNamespace().runtime.sendMessage(
-                window.CSGOFLOAT_EXTENSION_ID || chrome.runtime.id,
+                window.CSFLOAT_EXTENSION_ID || chrome.runtime.id,
                 bundle,
                 // @ts-ignore Bad types
                 (resp: InternalResponseBundle) => {

src/lib/bridge/client.ts

@@ -17,8 +17,8 @@ export const ExecuteScriptOnPage = new PrivilegedHandler(
             world: 'MAIN',
             args: [chrome.runtime.id, chrome.runtime.getURL('src/model_frame.html')],
             func: function ExtensionId(extensionId, modelFrameUrl) {
-                window.CSGOFLOAT_EXTENSION_ID = extensionId;
-                window.CSGOFLOAT_MODEL_FRAME_URL = modelFrameUrl;
+                window.CSFLOAT_EXTENSION_ID = extensionId;
+                window.CSFLOAT_MODEL_FRAME_URL = modelFrameUrl;
             },
         });