Chrome 扩展错误：gapi.auth2.ExternallyVisibleError: Invalid cookiePolicy using React and Webpack

Posted 2023-02-23

【中文标题】Chrome 扩展错误：gapi.auth2.ExternallyVisibleError: Invalid cookiePolicy using React and Webpack

【英文标题】：Chrome Extension error: gapi.auth2.ExternallyVisibleError: Invalid cookiePolicy using React and Webpack

【发布时间】：2021-02-10 21:27:41

【问题描述】：

我正在开发一个 google chrome 扩展程序，需要编辑并查看日历事件列表。我正在使用 google Calendar Api 并接收 gapi.auth2.ExternallyVisibleError: Invalid cookiePolicy。我试图将 OAuth Client google api Console 上的 localhost 地址列入白名单，但未纠正。使用 webpack 作为打包器。我该如何解决这个错误，我已经看到gapi 与 chrome 扩展不兼容，如果是这种情况，我如何使用 chrome 扩展读取和编辑事件。

【问题讨论】：

这能回答你的问题吗？ gapi.auth2.ExternallyVisibleError: Invalid cookiePolicy

@DaImTo 因为我正在使用 webpack 并且它在端口 3000 上运行，所以我在开发者控制台中将该端口列为授权 javascript 来源。但它不起作用。

这是仅在您的域中使用，还是用于分布式 Chrome 扩展程序？

@RafaGuillermo 这实际上是一种用于学习目的的项目工作

所以有人会说它是供个人使用的？

【参考方案1】：

答案：

gapi 客户端不能在 Chrome 扩展中使用，但您可以使用 Apps Script Web App 来获取日历事件。

解决方法：

由于多种原因，解决此问题的方法可能会有点复杂，因此我将把它分解为几个步骤并解释该过程。

开始：

您要做的第一件事是设置一个 Apps Script 网络应用。例如，我将只让 Web 应用返回日历事件的名称，但您可以根据自己的目的进行修改。

function doGet(e) 
  var callback = e.parameter.callback; // jQuery callback parameter
  var cal = CalendarApp.getCalendarsByName("primary"); // get calendar
  var eventId = e.parameter.eventId;

  var content = 
    "title": cal.getEventById(iCalId).getTitle();
  ; 

  var returnStr = callback + '(' + JSON.stringify(content) + ')';

  return ContentService.createTextOutput(returnStr)
           .setMimeType(ContentService.MimeType.JAVASCRIPT);

上述代码的想法是，您可以获取 Web 应用程序并将结果作为 JavaScript 提供给您的 Chrome 扩展程序。这样做是为了规避任何可能限制您的 Web 应用程序的 CORS 策略，以及 Web 应用程序 UI 界面提供的不必要的 html 填充。

您需要从这里部署 Web 应用程序以供使用。

您可以通过Publish > Deploy as web app... 菜单项执行此操作，然后选择Execute the app as: me 和Who has access to the app: Anyone, even anonymous。

包括 jQuery 和项目清单：

接下来您要做的是下载 jQuery.js 以将其包含在您的项目中。您可以从 Google 的 CDN here 下载它。将其包含在您的项目文件夹中并相应地更新您的清单：

// ...
"permissions": ["https://script.google.com/a/domain/macros/s/script-url/*"]
"background": 
  "scripts": ["background.js", "jquery.js"]
,
// ...

调用网络应用：

现在，您可以从 Chrome 扩展程序中的 background.js 使用包含的 jQuery 文件的 getJSON() 函数调用您的网络应用程序：

function myFunc() 
  const url = "https://script.google.com/a/domain/macros/s/script-url/exec"
  // ...
  var eventToGetTitleOf = "some-event-id";
  if (someLogic) 
    callWebApp(url, eventToGetTitleOf);
  


function callWebApp(call, eventId) 
  call = call + "?eventId=" + eventId;

  $.getJSON(call + "&callback=?", function(response)
    callback(response);
  );


function callback(response)
  if (!response) 
    return;
  
  var title = response["title"];    
  console.log("The calendar event is called " + title);

在上面的例子中，定义如下：

myFunc() - 一个包含扩展逻辑的通用函数。

url - String 类型的 const，部署在 上一步。 eventToGetTitleOf - 一个包含主日历中事件的事件 ID 的变量。这是您希望获得标题的事件。

callWebApp() - 一个使用 jQuery 的 getJSON() 方法调用 Web 应用程序的函数。它以网页应用的 url 和要搜索的事件的事件 ID 作为参数。

call - Web 应用程序的 URL。这附加了字符串"?eventId=" + eventId，以便将其作为URL 参数传递给hte web 应用程序，由e.parameter.eventId 获取。 getJSON(call + "&callback=?", ...) - 使用设置的参数调用 Web 应用 URL，并在收到来自 Web 应用的响应时为回调设置处理程序。

callback() - 处理来自getJSON() 方法的响应的函数。如果响应未定义，则不返回任何内容，但如果收到某些内容，则打印以记录响应中收到的标题。

完整工作流程的概要：

从 Chrome 扩展程序调用 Apps Script Web 应用程序。 此 Web 应用程序的 URL 由基本 URL 以及由 Web 应用程序的 doGet(e) 处理的 URL 参数组成。 当 Web 应用收到请求时，它会提取 callback 和 eventId 参数并在主日历中搜索具有给定 eventId 的事件。 Web 应用然后获取事件的标题并将其返回到 JSON 结构中，字符串化并嵌入为文本/javascript 对象，以供 Chrome 扩展程序的回调方法处理。 收到响应时调用callback方法，并将响应中返回的数据打印到控制台。

参考资料：

jQuery.getJSON() | jQuery API Documentation Hosted Libraries - jQuery | Google Developers jquery.min.js