Question

我想制作一个像这样的Chrome扩展程序：https://chrome.google.com/webstore/detail/create-google-docs/mgealjdnniclkdecdodfiinjgjifjbfo （脚本代码如下）

但是，我想将https://docs.google.com/document/create的网址更改为：https://docs.google.com/document/u/0/create

我可以做的就是复制并粘贴并将其上传到Chrome商店，但这样就可以复制了。

最后我不知道如何编码。我试过了，但是。是的。

function onClickHandler(info, tab) {
  console.log(info.menuItemId + ' clicked.')
  // メニューが選択された時の処理
  if (info.menuItemId == "document_id") {
    window.open('https://docs.google.com/document/create');
  }else if (info.menuItemId == "spreadsheet_id") {
    window.open('https://docs.google.com/spreadsheets/create');
  }else if (info.menuItemId == "presentation_id") {
    window.open('https://docs.google.com/presentation/create');
  }else if (info.menuItemId == "form_id") {
    window.open('https://docs.google.com/forms/create');
  }else if (info.menuItemId == "drawing_id") {
    window.open('https://docs.google.com/drawings/create');
  }else if (info.menuItemId == "script_id") {
    window.open('https://script.google.com/macros/create');
  }else if (info.menuItemId == "mydrive_id") {
    window.open('https://drive.google.com/');
  }
};

chrome.contextMenus.onClicked.addListener(onClickHandler);
chrome.runtime.onInstalled.addListener(function() {

  chrome.contextMenus.create({
    "title": "Document",
    "id": "document_id",
  });
  console.log("New Document created.");

  chrome.contextMenus.create({
    "title": "Spreadsheet",
    "id": "spreadsheet_id",
  });
  console.log("New Spreadsheet created.");

  chrome.contextMenus.create({
    "title": "Presentation",
    "id": "presentation_id",
  });
  console.log("New Presentation created.");

    chrome.contextMenus.create({
    "title": "Form",
    "id": "form_id",
  });
  console.log("New Form created.");

    chrome.contextMenus.create({
    "title": "Drawing",
    "id": "drawing_id",
  });
  console.log("New Spreadsheet created.");

    chrome.contextMenus.create({
    "title": "Script",
    "id": "script_id",
  });
  console.log("New Script created.");

  chrome.contextMenus.create({
    "title": "My Drive",
    "id": "mydrive_id",
  });
  console.log("My Drive.");
});

Answer 1

这是另一种做同样事情的方式更容易理解

我们需要一个后台脚本来处理上下文菜单及其中的函数。还有一个popup.html。

首先我指定一个名为＆＃34; myscripts.js＆＃34;的脚本。在manifest.json上运行后台

<强>的manifest.json

{
"manifest_version": 2,
"name": "New Docs",
"version": "1.0",
"description": "",
"browser_action":
 {
  "default_popup": "popup.html"
 },
"background": {
    "scripts": ["myscripts.js"]
},  
"permissions": [
    "contextMenus"
]}

然后我创建上下文菜单并为每个菜单添加一个函数，只要你点击它们就会触发它

<强> myscript.js

///////////////////////// Functions /////////////////////////

function child1click() {
  chrome.tabs.create({  
    url: "https://docs.google.com/document/u/0/create",
  });           
}
function child2click() {
  chrome.tabs.create({  
    url: "https://docs.google.com/spreadsheets/u/0/create",
  });           
}
function child3click() {
  chrome.tabs.create({  
    url: "https://docs.google.com/presentation/u/0/create",
  });           
}
function child4click() {
  chrome.tabs.create({  
    url: "https://docs.google.com/forms/u/0create",
  });           
}
function child5click() {
  chrome.tabs.create({  
    url: "https://docs.google.com/drawings/u/0/create",
  });           
}
function child6click() {
  chrome.tabs.create({  
    url: "https://script.google.com/macros/u/0/create",
  });           
}
function child7click() {
  chrome.tabs.create({  
    url: "https://drive.google.com/",
  });           
}

///////////////////////// Context Menus /////////////////////////

///// Parent contextMenu /////

chrome.contextMenus.create({
    title: "Create New Docs",
    contexts: ["all"],
    id: "parent",
});

/////  Sub Context Menu /////

chrome.contextMenus.create({
    title: "Document",
    contexts:["all"],
    parentId: "parent",
    id: "child1",
    onclick: child1click,
});
chrome.contextMenus.create({
    title: "SpreadSheet",
    contexts:["all"],
    parentId: "parent",
    id: "child2",
    onclick: child2click,   
});
chrome.contextMenus.create({
    title: "Presentation",
    contexts:["all"],
    parentId: "parent",
    id: "child3",
    onclick: child3click,
});
chrome.contextMenus.create({
    title: "Form",
    contexts:["all"],
    parentId: "parent",
    id: "child4",
    onclick: child4click,
});
chrome.contextMenus.create({
    title: "Drawing",
    contexts:["all"],
    parentId: "parent",
    id: "child5",
    onclick: child5click,
});
chrome.contextMenus.create({
    title: "Script",
    contexts:["all"],
    parentId: "parent",
    id: "child6",
    onclick: child6click,
});
chrome.contextMenus.create({
    title: "My Drive",
    contexts:["all"],
    parentId: "parent",
    id: "child7",
    onclick: child7click,
});

<强> popup.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Create Google Docs</title>
</head>
<body>
<a href="https://docs.google.com/document/u/0/create" target="_blank" title="Create new Document"><img src="img/dc.png"></a>
<a href="https://docs.google.com/spreadsheets/u//0create" target="_blank" title="Create new Spreadsheet"><img src="img/ss.png"></a>
<a href="https://docs.google.com/presentation/u/0/create" target="_blank" title="Create new Presentation"><img src="img/pt.png"></a>
<a href="https://docs.google.com/forms/u/0/create" target="_blank" title="Create new Form"><img src="img/fo.png"></a>
<a href="https://docs.google.com/drawings/u/0/create" target="_blank" title="Create new Drawing"><img src="img/dw.png"></a>
<a href="https://script.google.com/macros/u/0/create" target="_blank" title="Create new Script"><img src="img/sc.png"></a>
<a href="https://drive.google.com/" target="_blank" title="Go to Google Drive"><img src="img/drive.png"></a>
</body>
</html>

<强>的style.css

body {
    min-width: 30px;
}

a {
    display: block;
    background-color: #fff;
    padding: 5px;
    /*text-align: center;*/
    -webkit-transition: all 0s ease;
    -moz-transition: all 0s ease;
    font-weight: bold;
    outline: none;
    text-decoration: none;
}

a:hover {
    background: #D3D3D3;
}

.text{
    color: Black;
    font-size: 12px;
}

img {
    margin-top: -5px;

}

正如您所看到的，在popup.html中使用了一些文件夹中的图像，为了获得图像，您可以右键单击“＃34;创建Google文档＆＃34;扩展，然后选择＆＃34;检查弹出窗口＆＃34;，然后转到＆＃34;来源＆＃34;然后＆＃34;网络＆＃34;并且你有扩展名的弹出文件，所以你去img文件夹，然后将所有图像下载到你的扩展文件夹上的img文件夹中......它应该看起来像这样

以下是所有图片的链接，如果您只需点击一下即可下载所有图片https://mega.nz/#!4vpFyKpY!IErDgvi4kR2L6D2XactUEOQoiQIFYyoqoJPWPX7J4OM

如何创建Chrome扩展程序以打开不同的Google标签

1 个答案: