Release v1.0.0 - feat: update logo

README.md

@@ -1,21 +1,129 @@
 # page-text-replacer
 
-page-text-replacer base on json template, click in extension and past your json model, example:
+This extension allows you to manipulate the text of web pages through a configuration, where you can specify rules via regex to capture and modify text on the page.
 
-````json
+Rules are applied every 2 seconds
+
+![Running extension](./docs/running.gif)
+
+## How to install?
+
+1. Extract the release you want to install
+
+![Extracting release 1.0.0 with the right mouse button](./docs/1.png)
+
+2.In Chrome, go to Manage extensions
+
+![Opening the Chrome extension manager using the shortcut to the right of the url](./docs/2.png)
+
+3. Enable development mode and click load unpacked compression
+
+![Clicking on development mode and loading the extension](./docs/3.png)
+
+4. Go inside the folder extracted in step 1 and select
+
+![Accessing the folder where the release 1.0.0 was extracted](./docs/4.png)
+
+5. The extension must be loaded
+
+![Verifying that the extension has been loaded](./docs/5.png)
+
+6. Pinned extension
+
+![Clicking to pinned the extension](./docs/6.png)
+
+7. Have fun clicking on the extension and opening the pop-up where you can paste the settings file, create configurations and even enable or disable extension processing
+
+![Clicking on the newly pinned extension](./docs/7.png)
+
+## How create a config?
+
+The rules are defined through a list, which follows the following format:
+
+```ts
 [
   {
-    "regexActiveOnUrl": "github.*gabrielogregorio.*vscode-config",
-    "name": "",
-    "url": "",
-    "querySelectorAllTextContent": "'[class=\"react-directory-truncate\"]'",
-    "replacers": [
+    // for organization
+    name: '',
+    url: '',
+
+    // regex that defines which sites the extension will be active on,
+    // in this case, this rule will be active on the url that contains this pattern
+    regexActiveOnUrl: 'github.*gabrielogregorio',
+
+    // this is the query selector all that the extension should search for, this
+    // is `document.querySelectorAll('query here')`, where the query here is the content below
+    querySelectorAllTextContent: '[itemprop="name codeRepository"]',
+
+    // replacers are the replacement rules that the extension will use, we will see more in the topic below
+    replacers: []
+  }
+];
+```
+
+## Replacers
+
+Replacers are the rules that will be applied to the page, it follows the following format.
+
+> Replacers change the `textContent` of each tag, that is, it is the equivalent of `document.getElementById('#exampleId').textContent`
+
+```ts
+{
+  // In situations where `querySelectorAll TextContent` returns unwanted
+  // content, you can use `regexSearchToApply` to filter only
+  // the desired content
+  // can be empty
+  "regexSearchToApply": "log:",
+
+  // only for organizations
+  "name": "",
+
+  // here is the regex that will be applied to the texts
+  // It is equivalent to `new RegExp(regexGlobalFound, 'g')`
+ "regexGlobalFound": ".*?msg:\\s(.*)",
+
+  // here is the regex that will be applied to replace,
+  // that is, it is the equivalent of
+  // `htmlTag.textContent.replace(regex, replaceBy)`
+  "replaceBy": "$1"
+}
+```
+
+And of course, you can and it is preferable that you use the extension itself to generate your replaces, as shown in the image below:
+
+![Creating a replacer that will have the configuration at the end of this topic](docs/model-config.png)
+
+You paste the target text, create your regex, your replace by and copy the generated settings, this will already return a regex escaped to JSON.
+
+And finally, here is a complete example of the model
+
+```ts
+[
+  {
+    regexActiveOnUrl: 'github.*gabrielogregorio',
+    name: '',
+    url: '',
+    querySelectorAllTextContent: '[itemprop="name codeRepository"]',
+    replacers: [
       {
-        "regexSearchToApply": ".*md|.*json",
-        "regexGlobalFound": "(.*)\\.(.*)",
-        "replaceBy": "$2 $1"
+        regexSearchToApply: '',
+        name: '',
+        regexGlobalFound: '.*?msg:\\s(.*)',
+        replaceBy: '$1'
       }
     ]
   }
-]```
-````
+];
+```
+
+Just paste your configuration
+![Pasting the generated configuration into the Past your config file section of the extension](./docs/past-config.png)
+
+And enable the extension
+
+![Enabling the extension at the top of the extension popup](./docs/enable-extension.png)
+
+
+## For devs
+
+To contribute you can open issues, pull requests, I don't have many rules except that you cannot upload pull requests with .zip or any type of binary, all .zip will be generated only by min (JUST FOR SAFETY), but I fully accept ALL other changes to the code as long as you have eslint, prettier and commitlint configured (or that you follow the standard of these tools) and that all tests and ci are passing. 💛 💙

src/poupup/index.ts

@@ -51,17 +51,17 @@ const processRegexUpdated = () => {
 
 (function syncLocalStatesOnLocalStorageService() {
   htmlInputText.addEventListener('input', () => {
-    LocalStorageService.save('htmlInputText', removeExtraneousCharacters(htmlInputText.value) || '');
+    LocalStorageService.save(htmlInputText.id, removeExtraneousCharacters(htmlInputText.value) || '');
     processRegexUpdated();
   });
 
   htmlInputRegex.addEventListener('input', () => {
-    LocalStorageService.save('htmlInputRegex', htmlInputRegex.value || '');
+    LocalStorageService.save(htmlInputRegex.id, htmlInputRegex.value || '');
     processRegexUpdated();
   });
 
   htmlInputReplaceBy.addEventListener('input', () => {
-    LocalStorageService.save('htmlInputReplaceBy', htmlInputReplaceBy.value || '');
+    LocalStorageService.save(htmlInputReplaceBy.id, htmlInputReplaceBy.value || '');
     processRegexUpdated();
   });
 

src/services/LogService.ts

@@ -25,3 +25,4 @@ export class LogService {
     console.error('[page-text-replacer] ' + message, ...optionalParams);
   }
 }
+