Question

我是Podio API和Javascript的新手，具有HTML / CSS / PHP的一般知识。所以这是我的问题。

我正在创建一个Chrome扩展程序[因此PHP这次不使用]
我想使用其API提取数据并将其扔给Podio-我选择Podio Javascript API。
我似乎找不到任何可行的示例。

我做什么。

研究。但是Podio文档，即使不是过时的，对于像我这样的新手也不是很清楚。
使用用于PHP的Podio API设法从Podio中提取数据（成员的姓名），但是正如我所说的，我正在开发Chrome扩展程序，因此由于Google设置的限制，PHP无法使用。

所以我在本地主机上使用服务器。

index.php

<?php
  require_once('podio-php-4.3.0/PodioAPI.php');
  $client_id = [myID];
  $client_secret = [mySecret];
  Podio::setup($client_id, $client_secret);

  $oauth = Podio::is_authenticated(); 

  Podio::authenticate_with_password("sample@email.com", "samplePassword");

  $team = PodioSpaceMember::get_all( '5879519' );
  $a = 0;

  foreach ($team as $v) 
  {
    echo print_r($team[$a]->profile->name);
    $a = $a + 1;
  }
?>

我的 popup.html

<html>

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="Design-JS-and-CSS/bootstrap.min.css" />
<link rel="stylesheet" href="Design-JS-and-CSS/bootstrap-multiselect.css" />
<style> 

body
{
width: 500px;
height:300px;
}

#divFather
{
position: absolute;
top: -5px;
left: 0px;
right: 0px;
}

#divMother
{
position: absolute;
top: 50px;
left: 5px;
right: 5px;
}

#divHead
{
padding: 10px;
color: white;
font-size: 15px;
background-color: #4b89b2;
}

#divFirstRow
{
border: 1px solid;
border-color: #cccccc;
padding: 7px 7px 0px 7px;
margin-bottom: 5px;
height: 50px;  
}   

/* For the Textbox Enter a Task */
[class|=txtInputTask] 
{
  border-style: none;
  padding: 10px;
  height: 40px;
  width: 90%;
}

[class|=txtInputTask]:focus 
{
  outline: none;
}

#divSecondRow
{
border: 1px solid;
border-color: #cccccc;
padding: 7px 7px 0px 7px;
margin-bottom: 5px;
height: 35px; 

display: flex;
}

/* For the Combobox Pick a connection or type an email address*/
[class|=cboNames] 
{
  border-style: none;
  padding: 10px;
  height: 35px;
  width: 430px; 
}

[class|=cboNames]:focus 
{
  outline: none;
}

/*For the Button Man on Notebook*/
[class|=btnManOnNotebook]
{
  border-style: solid;
  background-color: #cccccc;
  padding: 10px;
  margin-left: 5px;
  height: 25px;
  width: 30px;

  background: url("Images/icon-man-on-notebook-gray.png") no-repeat center center;
  background-size: 20px 16.7px;
  cursor:pointer;
} 

input
{
background-color: transparent;

color: #777777;
}

[class|=divInput] 
{
border-style: none;
padding: 1px;
}

[class|=divInput]:focus 
{
outline: none;
}

</style> 

<head>
<title>Yoonet Podio Tasker</title>
</head>

<body>
<div id = "divFather">
<div id = "divHead">New task on Yoonet - Podio Tasker From Chrome</div>

<div id = "divMother">



<div id = "divFirstRow">
  <form action="/action_page.php">
    <img class="imgIputTask" src = "Images/icon-check-gray.png" height="15" width="15"/>
    <input class="txtInputTask" type="text" name="Task" placeholder="Enter a task...">
  </form>
</div> 

<div id = "divSecondRow">
    <div id = "divConnection">
      <img class="imgNames" src = "Images/icon-man-gray.png" height="15" width="15"/>
      <!--//////////////////////////////////////////////////////-->
      <ul></ul><!--This is the holder of the selected members-->
      <select id = "iselect" onchange="selectIngredient(this);" width = "2000px"></select>
      <!--//////////////////////////////////////////////////////-->
    </div>

    <button class="btnManOnNotebook"></button>
</div> 

</div>
</div>

<script src="popup.js"></script>
<script src="func.js"></script>

</body>

 <script src="Design-JS-and-CSS/jquery.min.js"></script>
 <script src="Design-JS-and-CSS/bootstrap3-typeahead.min.js"></script>  
 <script src="Design-JS-and-CSS/bootstrap.min.js"></script>
 <script src="Design-JS-and-CSS/bootstrap-multiselect.js"></script> 
</html>

这是 popup.js

function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // XHR for Chrome/Firefox/Opera/Safari.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // XDomainRequest for IE.
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
return xhr;
}

// Helper method to parse the title tag from the response.
function getTitle(text) {
  return text.match('<title>(.*)?</title>')[1];
}

// Make the actual CORS request.
function makeCorsRequest() {
  //The URL below is the URL of your Data Scraping script written in PHP.
  var url = 'http://localhost/Yoonet-Plugin-Podio-Tasker-Server/index.php';

  var xhr = createCORSRequest('GET', url);
  if (!xhr) {
    document.getElementById('revert').innerHTML = 'CORS not supported';
    return;
  }

  // Response handlers.
  xhr.onload = function() {
    var text = xhr.responseText;
    //document.getElementById('revert').innerHTML=text;


    //var select = document.getElementById("iselect");
    //select.options[select.options.length] = new Option(text);

    var arrItems = text.split("1");
    var option = '';
    for (var i=0;i<arrItems.length;i++)
    {
       var select = document.getElementById("iselect");
       select.options[select.options.length] = new Option(arrItems[i]);
    }
    $('#items').append(option);

  };

  xhr.onerror = function() {
    document.getElementById('revert').innerHTML = 'Woops, there was an error making the request.';
  };

  xhr.send();
}

var a = makeCorsRequest;
a();

这是 func.js

function selectIngredient(select)
{
var option = select.options[select.selectedIndex];
var ul = select.parentNode.getElementsByTagName('ul')[0];

var choices = ul.getElementsByTagName('input');
for (var i = 0; i < choices.length; i++)
if (choices[i].value == option.value)
  return;

var li = document.createElement('li');
var input = document.createElement('input');
var text = document.createTextNode(option.firstChild.data);

input.type = 'hidden';
input.name = 'ingredients[]';
input.value = option.value;

li.appendChild(input);
li.appendChild(text);
li.setAttribute('onclick', 'this.parentNode.removeChild(this);');     

ul.appendChild(li);
}

要完成，这是我的 manifest.json

{
"manifest_version": 2,

"name": "Data Scraping with PHP",
"description": "This extension demonstrates a browser action that showcases data scraping done with PHP.",
"version": "1.0",

"permissions": [
"http://localhost/out/index.php"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}

这是可行的，但不是解决我问题的正确方法。希望你们能为我提供帮助或为我提供一个 HTML文件的工作示例，该文件仅使用javascript 即可从Podio中获取数据。谢谢您进行高级而愉快的编码！

如何使用Javascript Podio API（不使用任何PHP代码）将PODIO提取为HTML [Chrome扩展开发]

0 个答案: