Chrome扩展学习Demo(二)：通过js向页面填充数据

ゝ一纸荒年。 2024-02-19 22:02 24阅读 0赞

> 场景：向各个登录页面填充账号和密码。

效果图：github.com/login

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70][]

代码截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 1][]

#### manifest.json ####

{
      "manifest_version": 2,
      "name": "通过js向页面填充数据",
      "version": "1.0",
      "description": "通过js向登录页面填充数据",
      "icons": {
        "48": "icon.png"
      },
      "browser_action": {
        "default_icon": "icon.png"
      },
      "content_scripts": [
        {
          "matches": ["https://github.com/*"],
          "js": ["content-script.js"]
        }
      ],
      "permissions": [
        "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
        "https://*/*"// 可以通过executeScript或者insertCSS访问的网站
      ]
    }

#### content-script.js ####

if (/github.com\/login/.test(window.location.href)) {
      document.getElementById('login_field').value = 'smart_dream';
      document.getElementById('password').value = '123456';
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c77e92ee8c54412b96cd8da645529e7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/78ea7ebd9c6b426dae92f246393bd0c4.png