Replace chrome's WebAPI function using inject_script through chrome extension

问题

I am replacing navigator.credentials.create() and navigator.credentials.get() using chrome extension. navigator.credentials.create() for registering a 'security key' for 2nd-factor authentication. My replacement script works with some websites like Facebook and GitHub but doesn't work on some websites like Gmail, Twitter, Amazon AWS. What might be the issue? Why is there an inconsistency here?

content_script.ts

 const webauthnInject = document.createElement('script');
 webauthnInject.type = 'text/javascript';
 webauthnInject.src = 'chrome-extension://' + chrome.runtime.id + '/js/inject_webauthn.js';
 document.documentElement.appendChild(webauthnInject);

inject_webauthn.ts

(() => {
cKeyCredentials.create = async (options: CredentialCreationOptions): Promise<Credential | null> => {//code}

cKeyCredentials.get = async (options: CredentialRequestOptions): Promise<Credential | null | any> => {//code}

Object.assign(navigator.credentials, cKeyCredentials);
})();

manifest.json

"content_scripts": [
    {
      "all_frames": true,
      "matches": [
        "https://*/*",
        "http://*/*"
      ],
      "exclude_matches": [
        "https://*/*.xml"
      ],
      "run_at": "document_start",
      "js": [
        "js/content_script.js"
      ]
    }
  ],
"permissions": [
    "tabs",
    "storage"
  ],
  "web_accessible_resources": [
    "js/inject_webauthn.js",
    "img/*"
  ],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",

Updates

The issue is likely because of new dynamic iframes as pointed out by wOxxOm and kaiido. So, I'm trying to use mutationObserver

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        [].filter.call(mutation.addedNodes, function (node) {
            return node.nodeName == 'IFRAME';
        }).forEach(function (node) {
            node.addEventListener('load', function (e) {
                console.log('loaded', node.src);
            });
        });
    });
});
observer.observe(document.documentElement, { childList: true, subtree: true });

I added the above observer in content_script.js. It still doesn't detect the relevant new IFRAME.

来源：https://stackoverflow.com/questions/61948769/replace-chromes-webapi-function-using-inject-script-through-chrome-extension

标签

javascript

google-chrome-extension

navigator

content-script

webauthn