从Chrome扩展中获取和执行API的脚本

发布于 2025-02-03 18:04:18 字数 3335 浏览 1 评论 0原文

我正在开发带有V3 的Chrome Extension，我想获得Google 放置自动完成的API 在options.html页面中运行＆lt; input＆gt; tag。

这是我的文件：

subest.json


    {
      ...
      "manifest_version": 3,
      "background": {
        "service_worker": "background.js"
      },
      "host_permissions": [
        "https://maps.googleapis.com/*"
      ],
      "permissions": [
        "storage",
        "activeTab",
        "scripting"
      ],
      "options_page": "options.html",
      ...
    }

options.html


    <head>
        ...
        <link rel="stylesheet" href="options.css">
        ...
    </head>
    <body>
        ...
        <input id="autocomplete_input" type="text">
        ...
    <script src="autocomplete.js"></script>
    <script id="google_autocomplete" defer></script>
    </body>

background.js

  

      chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
            if (request.name === "autocomplete") {
                const apiKey = "YOUR-API-KEY-HERE";
                const url = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`
        
                fetch(url).then(function (response) {
                    if (response.status !== 200) {
                        console.log(`Error: ${response.status}`);
                        return;
                    }
                    response.text().then(function (text) {
                        sendResponse(text);
                    });
                })
            }
            return true;
        });

autocomplete.js


    chrome.runtime.sendMessage({name: "autocomplete"}, (response) => {
    
            const script = `${response}
                    const input = document.getElementById('autocomplete_input');
                    new google.maps.places.Autocomplete(input);
    `
            document.getElementById("google_autocomplete").innerHTML = script;
        }
    );

现在，＆lt; script>＆gt; tag in options.html ，但没有运行。相反，我会收到以下错误：

autocomplete.js：7 |拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“ script-src'self''wasm-unsafe-eval'“”。 “不安全限制”关键字，即Hash（'SHA256-N6ZZJDYC/scoatyJo7K9HW0FNLA5DPC377N56EXRM0C ='），或者需要nonce（'nonce -...'nonce -...'）才能启用内线执行。
>
>

我还尝试了直接在浏览器控制台内部运行的代码，但是我遇到了此错误：

拒绝加载脚本'”，因为它违反了以下内容内容安全策略指令：“脚本 - src'self' “ wasm-nsafe-eval”。设置，因此“脚本 - src”用作后备。

VM378：85拒绝加载脚本'https://maps.googleapis.com/maps-api-v3/api/js/49/49/2/intl/fr_all/common.js'，因为它违反了以下内容安全策略指令：“ script-src'self''wasm-unsafe-eval'“”。请注意，“ Script-SRC-Elem”不是明确设置的，因此“脚本 - src”被用作后备。

但是它在subtest.json中已经存在一些问题的URL。

我真的在这里迷路了。感谢您的帮助！

原文

I am developing a chrome extension, with Manifest V3, and I would like to get Google Places Autocomplete API to run in the options.html page in an <input> tag.

Here are my files:

manifest.json


    {
      ...
      "manifest_version": 3,
      "background": {
        "service_worker": "background.js"
      },
      "host_permissions": [
        "https://maps.googleapis.com/*"
      ],
      "permissions": [
        "storage",
        "activeTab",
        "scripting"
      ],
      "options_page": "options.html",
      ...
    }

options.html


    <head>
        ...
        <link rel="stylesheet" href="options.css">
        ...
    </head>
    <body>
        ...
        <input id="autocomplete_input" type="text">
        ...
    <script src="autocomplete.js"></script>
    <script id="google_autocomplete" defer></script>
    </body>

background.js

  

      chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
            if (request.name === "autocomplete") {
                const apiKey = "YOUR-API-KEY-HERE";
                const url = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`
        
                fetch(url).then(function (response) {
                    if (response.status !== 200) {
                        console.log(`Error: ${response.status}`);
                        return;
                    }
                    response.text().then(function (text) {
                        sendResponse(text);
                    });
                })
            }
            return true;
        });

autocomplete.js


    chrome.runtime.sendMessage({name: "autocomplete"}, (response) => {
    
            const script = `${response}
                    const input = document.getElementById('autocomplete_input');
                    new google.maps.places.Autocomplete(input);
    `
            document.getElementById("google_autocomplete").innerHTML = script;
        }
    );

Right now, the code from the API is loaded inside the <script> tag in options.html, but it is not running. Instead, I'm getting the following error:

autocomplete.js:7 | Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-n6ZzjDYC/sCOAtyJo7K9Hw0FNlA5DPc377N56EXrM0c='), or a nonce ('nonce-...') is required to enable inline execution.

I also tried running directly the fetched code inside the browser console, but I'm getting this error:

Refused to load the script '' because it violates the following
Content Security Policy directive: "script-src 'self'
'wasm-unsafe-eval'". Note that 'script-src-elem' was not explicitly
set, so 'script-src' is used as a fallback.

VM378:85 Refused to load the script 'https://maps.googleapis.com/maps-api-v3/api/js/49/2/intl/fr_ALL/common.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

But the URL it has some issues with is already in the manifest.json.

I'm really lost here. Thanks for your help!

分享到QQ

分享到微博