Question

我是Chrome扩展程序开发的新手，并且一度停留。请帮帮我。

扩展目的：此扩展程序只需要谷歌登录。

到目前为止完成的工作：

的index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/creative.css" type="text/css">
<title>TrustWall Authentication</title>
<script src="index.js"></script>
</head>
<body>
<header>
        <div class="header-content">
            <div class="header-content-inner">
                <div id="title">
                    <h1 id="s">TrustWall Demo</h1>
                </div>
                <hr>
                <p>This is a demo Plugin demostrating Trustwall touchID based
                    login</p>
                <div id="google_login">
                    <input id="google" type="button" value="Login by google"
                        class="btn btn-primary btn-xl page-scroll" />
                </div>
                <div id="sclconnect_login">
                    <input id="sclconnect" type="button" value="Login using TrustWall"
                        class="btn btn-primary btn-xl page-scroll" />
                </div>
            </div>
        </div>
    </header>
<div id="profile"></div>

</body>
</html>

的manifest.json

{
    "manifest_version": 2,
    "name": "Getting started example",
    "description": "This extension shows a Google Image search result for the current page",
    "version": "1.0",

    "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "index.html"
    },
    "permissions": [
    "activeTab",
    "https://www.googleapis.com",
    "http://*.google.com/"
  ],
  "content_security_policy": "script-src 'self' https://apis.google.com; object-src 'self'"
}

index.js

function init(){
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
       po.src = 'https://apis.google.com/js/client.js?onload=onLoadCallback';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
}

function logout()
{
    gapi.auth.signOut();
    location.reload();
}
function login() 
{
  var myParams = {
    'clientid' : '775263086375-33h1eij26jocplkkv52h08jlfifohvkp.apps.googleusercontent.com',
    'cookiepolicy' : 'single_host_origin',
    'callback' : 'loginCallback',
    'approvalprompt':'force',
    'scope' : 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read'
  };
  gapi.auth.signIn(myParams);
}

function loginCallback(result)
{
    if(result['status']['signed_in'])
    {
        var request = gapi.client.plus.people.get(
        {
            'userId': 'me'
        });
        request.execute(function (resp)
        {
            var email = '';
            if(resp['emails'])
            {
                for(i = 0; i < resp['emails'].length; i++)
                {
                    if(resp['emails'][i]['type'] == 'account')
                    {
                        email = resp['emails'][i]['value'];
                    }
                }
            }
            var str = "Name:" + resp['displayName'] + "<br>";
            str += "Image:" + resp['image']['url'] + "<br>";
            str += "<img src='" + resp['image']['url'] + "' /><br>";
            str += "URL:" + resp['url'] + "<br>";
            str += "Email:" + email + "<br>";
            document.getElementById("profile").innerHTML = str;
            var e = document.getElementById("google_login");
                e.style.display = "none";
            var e1 = document.getElementById("sclconnect_login");
                e1.style.display = "block";
        }); 
    } 
}
function onLoadCallback()
{
    gapi.client.setApiKey('AIzaSyA4o1P6gHvaX1aem0lLNvKgVCSrxtge0pg');
    gapi.client.load('plus', 'v1',function(){});
    document.getElementById("google").onclick = login;
}

document.addEventListener('DOMContentLoaded', function () {
   init();
   var sclConnectBtn = document.getElementById("sclconnect_login");
    sclConnectBtn.style.display='none';
});

这个插件给了我Origin_mismatch错误。这可能是因为需要在控制台中提到的不正确的javascript源。但不知道在javascript原点写什么。我的manifest.json已经请求谷歌的许可。

chrome扩展名的cross_origin错误

0 个答案: