javascript - 从 chrome 扩展中的谷歌分析 api 获取数据？

Question

我正在尝试开发表单放弃热图

function newMarkup(id, uniqueHits){
var min = Math.min.apply(null,uniqueHits);
var max = Math.max.apply(null,uniqueHits);
var med = max / 2;
for(var num = 0; num < id.length; num++){
    styleElement(id[num], uniqueHits[num], min, max, med);
}}

function styleElement(element, value, min, max, med){
    var el = $("[id$=" + element + "]");
    if(el.prop('nodeName') === "INPUT"){
        if(value == max){
            el.addClass('very-good');
        }
        if(value < max && value > med){
            el.addClass('good');
        }
        if(value == med){
            el.addClass('average');
        }
        if(value < med && value > min){
            el.addClass('not-so-good');
        }
        if(value == min){
            el.addClass('poor');
        }
    } else {
        el = el.next();
        if(value == max){
            el.addClass('very-good');
        }
        if(value < max && value > med){
            el.addClass('good');
        }
        if(value == med){
            el.addClass('average');
        }
        if(value < med && value > min){
            el.addClass('not-so-good');
        }
        if(value == min){
            el.addClass('poor');
        }
    }
}

我想知道是否可以从 chrome 扩展程序调用 api？

本质上，我正在尝试执行此调用以获取数据:

gapi.client.analytics.data.ga.get({
    'ids': 'ga:' + profileId,
    'start-date': '7daysAgo',
    'end-date': 'today',
    'metrics': 'ga:uniqueEvents',
    'dimensions': 'ga:eventLabel',
    'sort':'-ga:uniqueEvents',
    'filters': "ga:eventCategory==Form Field Tracking - /join"
})

我尝试通过在 MVC Web 应用程序中使用 iFrame 来创建我的 heatmapper，但由于尝试跨域发送数据的麻烦，我放弃了。

我想知道是否可以从 chrome 扩展的分析 API 中获取数据？我想它必须以与谷歌脚本如何使用分析 API(使用服务帐户)类似的方式完成，但我无法找到任何文档或找出这是否可能。
(脚本中的代码示例)

function runReport(profileId) {
    var today = new Date();
    var oneWeekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);

    var startDate = Utilities.formatDate(oneWeekAgo, Session.getTimeZone(), 'yyyy-MM-dd');
    var endDate = Utilities.formatDate(today, Session.getTimeZone(), 'yyyy-MM-dd');
    var tableId  = 'ga:' + profileId;
    var metric = 'ga:uniqueEvents';
    var options = {
        'dimensions': 'ga:eventLabel',
        'sort':'-ga:uniqueEvents',
        'filters': "ga:eventCategory==Form Field Tracking - /join"
    };
    var report = Analytics.Data.Ga.get(tableId, startDate, endDate, metric, options);
}

我非常感谢任何人对我的任何帮助或建议。我正在尝试从 chrome 扩展中查询谷歌分析的 API。这可能吗？

Answer 1

未在 GA 上专门测试，但这是使用 API 需要外部服务器的脚本的一般方法:

内容脚本无法向其他站点发出请求，因此它应该通过 sending a message 要求后台页面执行此操作

背景页包含ga.js list 中引用的脚本，此文件必须存在于扩展中，它不是远程加载的脚本。

添加corresponding CSP rule后后台页面可以与外部API服务器通信(在 list 中添加)

现在后台页面监听器接收到来自步骤 1 的消息，它调用 GA 并将结果发送回原始选项卡的内容脚本(接收到第一条消息时保存了 tabId)。

list .json:

"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "run_at": "document_start",
        "all_frames": true,
        "js": ["content.js"]
    }
],
"background": {
    "scripts": ["background.js", "ga.js"]
},
"content_security_policy": 
    "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
.............

内容.js:

chrome.runtime.sendMessage({type: "getGA", data: some_data_for_GA});
chrome.runtime.onMessage.addListener(function(msg) {
    if (msg.type == "GA") {
        // apply msg.data to the page elements
        ...................
    }
});

背景.js:

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    var tabId = sender.tab.id, frameId = sender.frameId;
    if (msg.type == "getGA") {
        gapi.client.analytics.data.ga.get({
            ..................... // use msg.data if needed
        }).execute(function(response) {
            sendMessageToFrameId(tabId, frameId, {type: "GA", data: response});
        });
    }
});

function sendMessageToFrameId(tabId, frameId, msg) {
    // 1. frameId works since Chrome 41 and throws on prior versions
    // 2. without frameId Chrome 45 sends the message to wrong tabs
    try { chrome.tabs.sendMessage(tabId, msg, {frameId: frameId}); }
    catch(e) { chrome.tabs.sendMessage(tabId, msg); }
}