Add content script and message passing to begin txn downloading

package.json

@@ -24,6 +24,7 @@
     "date-fns": "^2.29.3",
     "graphql": "^16.6.0",
     "graphql-request": "^5.2.0",
+    "jsx-dom": "^8.0.5",
     "level": "^8.0.0"
   }
 }

src/background/auth-state-handler.ts

@@ -1,7 +1,7 @@
 const matchGraphQL = { urls: ["https://graphql.landsbankinn.is/v2"] };
 
-import { fetchAccounts } from './landsbankinn';
-import { PartialStateUpdate, State } from './state';
+import { fetchAccounts } from '~/src/landsbankinn';
+import { PartialStateUpdate, State } from '~/src/state';
 
 type HttpHeaders = browser.webRequest.HttpHeaders;
 

src/background/message-handler.ts

@@ -0,0 +1,26 @@
+import { State } from "~/src/state";
+
+enum Actions {
+    GetAccounts = 'GET_ACCOUNTS',
+    DownloadTransactions = 'DOWNLOAD_TRANSACTIONS'
+}
+
+type MessageSender = browser.runtime.MessageSender;
+
+async function getAccounts(sender: MessageSender): Promise<any> {
+    //TODO somehow ensure state exists.
+    const message = {
+        accounts: (await State.current).accounts
+    };
+
+    browser.tabs.sendMessage(sender.tab?.id!, message);
+}
+
+browser.runtime.onMessage.addListener((message, sender) => {
+    switch (message.action) {
+        case Actions.GetAccounts:
+            getAccounts(sender);
+    }
+});
+
+export { }

src/content-script.ts

@@ -1,33 +0,0 @@
-import { setDefaultOptions, parse, format } from 'date-fns';
-import { enUS } from 'date-fns/locale';
-import { fetchAccounts, OutputFormat, DownloadTransactionsRequest, downloadTransactions } from './landsbankinn';
-
-setDefaultOptions({ locale: enUS });
-
-
-//First attempt hardcoded data
-async function doIt() {
-    console.log('doing it');
-    const from = parse('01 Jan 2023', 'dd MMM yyyy', new Date());
-    console.log(from);
-    const to = parse('31 Jan 2023', 'dd MMM yyyy', new Date());
-    const req: DownloadTransactionsRequest = {
-        accountNumber: '010126013792',
-        dateFrom: from,
-        dateTo: to,
-        outputFormat: OutputFormat.CSV,
-    };
-
-    const txns = await downloadTransactions(req);
-    console.log(txns);
-}
-
-//doIt().then(() => alert('did it'));
-
-async function fetchIt() {
-    console.log('fetching it');
-    const data = fetchAccounts();
-    console.log(data);
-}
-
-//fetchIt().then(() => alert('fetched it'));

src/content-scripts/statement-page.tsx

@@ -0,0 +1,27 @@
+import React from 'jsx-dom';
+
+async function populateAccounts() {
+    const resp = await browser.runtime.sendMessage({
+        action: 'GET_ACCOUNTS',
+    });
+}
+
+//Add an element to the statement page
+document.addEventListener('DOMContentLoaded', async () => {
+    const contentDiv = document.querySelector('div[class="table-data content-box fill shadow"]');
+    contentDiv?.prepend(
+        <div class="content-box fill shadow ui-form">
+            <h2>Download Transaction Statements</h2>
+            <p>
+                Here, you can export statements from one or more of your accounts
+                over a specified date range.
+            </p>
+        </div>
+    );
+
+    await populateAccounts();
+});
+
+browser.runtime.onMessage.addListener((message, sender) => {
+    console.log('message received!', message);
+});

src/manifest.json

@@ -9,11 +9,12 @@
     "webRequestBlocking"
   ],
   "background": {
-    "scripts": [ "background.ts" ],
+    "scripts": [ "background/auth-state-handler.ts", "background/message-handler.ts" ],
     "persistent": false
   },
   "content_scripts": [{
-    "matches": ["https://netbanki.landsbankinn.is/*", "https://graphql.landsbankinn.is/v2"],
-    "js": ["content-script.ts"]
+    "matches": ["https://netbanki.landsbankinn.is/Ebli/Statements/ClientSummary.aspx"],
+    "js": ["content-scripts/statement-page.tsx"],
+    "run_at": "document_start"
   }]
 }

src/tsconfig.json

@@ -7,8 +7,8 @@
     "allowSyntheticDefaultImports": true,
     "lib": [ "dom", "es6" ],
     "jsx": "react-jsx",
-    "esModuleInterop": true,
     "jsxImportSource": "jsx-dom",
+    "esModuleInterop": true,
     "isolatedModules": true,
     "moduleResolution": "node",
     "baseUrl": ".",

todo.org

@@ -3,8 +3,11 @@ How to get it working:
  - [ ] Transform raw transactions into friendlier ones (i.e. date objects)
  - [ ] Content script that can run all the time and puts a button somewhere (statements tab, and extension icon)
  - [ ] Background page that downloads all the shit and combines into CSV, then 'downloads' file.
- - [ ] Graphql API client to get information about user, like listing accounts.
-   - [ ] Get working client
-   - [ ] Set API key
-   - [ ] Set bearer token
-   - [ ] Intercept bearer token by yoinking it out of a request
+ - [ ] Build up communication message passing to background page for downloads
+ - [ ] Investigate persistent = false + setTimeout
+   - [ ] Maybe can force clear state when page reloads itself?
+ - [X] Graphql API client to get information about user, like listing accounts.
+   - [X] Get working client
+   - [X] Set API key
+   - [X] Set bearer token
+   - [X] Intercept bearer token by yoinking it out of a request

yarn.lock

@@ -1076,6 +1076,11 @@ csso@^4.2.0:
   dependencies:
     css-tree "^1.1.2"
 
+csstype@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
+  integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
+
 date-fns@^2.29.3:
   version "2.29.3"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
@@ -1317,6 +1322,13 @@ json5@^2.2.0, json5@^2.2.1:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
+jsx-dom@^8.0.5:
+  version "8.0.5"
+  resolved "https://registry.yarnpkg.com/jsx-dom/-/jsx-dom-8.0.5.tgz#63b45ae2c583bec37c4e1003e608e5658c2b0f32"
+  integrity sha512-Dt4PLuFFm16Qj1TH0GSx6LdrfnrPSh5lEHG87Hd4lv9nDWGD3ZtUdp5RXH7GyEWI0E+19eoUDFcyO5dnJQ/4IQ==
+  dependencies:
+    csstype "^3.1.1"
+
 level-supports@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/level-supports/-/level-supports-4.0.1.tgz#431546f9d81f10ff0fea0e74533a0e875c08c66a"