chore: small changes

devtools/db.js

@@ -0,0 +1,32 @@
+// https://gist.github.com/enjalot/6472041
+var indexedDB = window.indexedDB
+var open = indexedDB.open('MyDatabase', 1)
+open.onupgradeneeded = function () {
+  var db = open.result
+  var store = db.createObjectStore('MyObjectStore', { keyPath: 'id' })
+  var index = store.createIndex('NameIndex', ['name.last', 'name.first'])
+}
+open.onsuccess = function () {
+  var db = open.result
+  var tx = db.transaction('MyObjectStore', 'readwrite')
+  var store = tx.objectStore('MyObjectStore')
+  var index = store.index('NameIndex')
+
+  store.put({ id: 12345, name: { first: 'John', last: 'Doe' }, age: 42 })
+  store.put({ id: 67890, name: { first: 'Bob', last: 'Smith' }, age: 35 })
+
+  var getJohn = store.get(12345)
+  var getBob = index.get(['Smith', 'Bob'])
+
+  getJohn.onsuccess = function () {
+    console.log(getJohn.result.name.first) // => "John"
+  }
+
+  getBob.onsuccess = function () {
+    console.log(getBob.result.name.first) // => "Bob"
+  }
+
+  tx.oncomplete = function () {
+    db.close()
+  }
+}

devtools/target.html

@@ -4,6 +4,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" />
+    <link rel="modulepreload" href="/db.js" />
     <title>Target</title>
     <style>
       .motto {
@@ -78,6 +79,9 @@
     </div>
     <div class="big"></div>
     <div class="small"></div>
+    <div class="image">
+      <img src="https://chii.liriliri.io/logo.png" alt="placeholder" />
+    </div>
     <script>
       console.log('Page loaded!')
       setTimeout(function () {
@@ -103,41 +107,7 @@
       testFetch()
       testWs()
     </script>
-    <script>
-      // https://gist.github.com/enjalot/6472041
-      var indexedDB = window.indexedDB
-      var open = indexedDB.open('MyDatabase', 1)
-      open.onupgradeneeded = function () {
-        var db = open.result
-        var store = db.createObjectStore('MyObjectStore', { keyPath: 'id' })
-        var index = store.createIndex('NameIndex', ['name.last', 'name.first'])
-      }
-      open.onsuccess = function () {
-        var db = open.result
-        var tx = db.transaction('MyObjectStore', 'readwrite')
-        var store = tx.objectStore('MyObjectStore')
-        var index = store.index('NameIndex')
-
-        store.put({ id: 12345, name: { first: 'John', last: 'Doe' }, age: 42 })
-        store.put({ id: 67890, name: { first: 'Bob', last: 'Smith' }, age: 35 })
-
-        var getJohn = store.get(12345)
-        var getBob = index.get(['Smith', 'Bob'])
-
-        getJohn.onsuccess = function () {
-          console.log(getJohn.result.name.first) // => "John"
-        }
-
-        getBob.onsuccess = function () {
-          console.log(getBob.result.name.first) // => "Bob"
-        }
-
-        tx.oncomplete = function () {
-          db.close()
-        }
-      }
-    </script>
-    <script src="target.js"></script>
+    <script type="module" src="target.js"></script>
     <script>
       console.log('console right after target injected')
       throw Error('exception right after target injected')

devtools/target.js

@@ -1,3 +1,5 @@
+import './db.js'
+
 const targetOrigin = location.protocol + '//' + location.host
 function sendToDevtools(message) {
   devtoolsIframe.contentWindow.postMessage(

src/lib/resources.ts

@@ -2,6 +2,7 @@ import map from 'licia/map'
 import filter from 'licia/filter'
 import compact from 'licia/compact'
 import contain from 'licia/contain'
+import endWith from 'licia/endWith'
 
 let isPerformanceSupported = false
 const performance = (window as any).webkitPerformance || window.performance
@@ -35,10 +36,24 @@ export function isImage(url: string) {
 
 function getResources(type: string) {
   return map(
-    filter(
-      performance.getEntries(),
-      (entry: any) => entry.initiatorType === type
-    ),
+    filter(performance.getEntries(), (entry: any) => {
+      if (entry.entryType !== 'resource') {
+        return false
+      }
+
+      if (entry.initiatorType === type) {
+        return true
+      } else if (entry.initiatorType === 'other') {
+        // preload
+        if (type === 'script') {
+          if (endWith(entry.name, '.js')) {
+            return true
+          }
+        }
+      }
+
+      return false
+    }),
     entry => entry.name
   )
 }