Chrome扩展学习Demo(一)：在popup里面跨域获取资源

缺乏、安全感 2024-02-19 22:02 14阅读 0赞

> 场景：在popup页面获取某个网站的资源。

效果图：

![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": "跨域获取图片",
      "version": "1.0",
      "description": "popup页面获取图片",
      "icons": {
        "48": "icon.png"
      },
      "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
      },
      "permissions": [
        "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
        "https://*/*"// 可以通过executeScript或者insertCSS访问的网站
      ]
    }

#### popup.html ####

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8"/>
    	<title>跨域获取图片</title>
    	<style>
    		img {
    			width: 500px;
    		}
    	</style>
    </head>
    <body style="width:500px;min-height:100px;">
        <div>这里是popup：跨域获取图片</div>
        <script type="text/javascript" src="popup.js"></script>
    </body>
    </html>

#### popup.js ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/9333a38053eb4f4bbb6025ae6edd658b.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/9237526370c54cd0ac985d0c0871d78f.png