Question

我想做chrome扩展程序，有点像启动器。
点击扩展程序时，它会显示严格的选项（例如google，twitter等）。
当我单击其中一个选项时，它会将我定向到正确的网站（单击google时，您已定向到google页面）。同一页面/活动页面（例如：当我使用我的我时，在github页面上的即时消息扩展名，然后选择Google，它将其直接定向到Google页面页，而不是新页。
它仅在某些Web上可用（仅在github上，而不在其他页面上）。

到目前为止我的代码

-manifest.Json

{
    "manifest_version":2,

    "name":"Test laucher",
    "description":"test launcher",
    "version":"1.0.0",
    "permissions": ["tabs", "*://*.github.com/*", "activeTab"],
    "browser_action":{
        "default_popup":"popup.html"
    },

    "content_scripts":[{ 
        "matches": ["*://*.github.com/*"],
        "js": ["contentz.js","js/jquery-3.3.1.js"]
    }],

    "icons":{
        "16":"icon-16.png",
        "48":"icon-48.png",
        "128":"icon-128.png"
    }
}

-popup.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Vynica</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="contentz.js" type="text/javascript"></script>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
    <ul id="menu-v">
        <li id="web_google"><a >google</a></li>
        <li>
            <a  class="arrow">Social media</a>
            <ul>
                <li id="web_facebook"><a >Facebook</a></li>
                <li>
                    <a  class="arrow">Twitter</a>
                    <ul>
                        <li><a >a lalala</a></li>
                        <li><a >b lalala</a></li>
                        <li><a >c lalala</a></li>
                    </ul>
                </li>
                <li>
                    <a  class="arrow">Instagram</a>
                    <ul>
                        <li><a >a lalala</a></li>
                        <li><a >b lalala</a></li>
                        <li><a >c lalala</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

-contentz.js

function goToWebsite(urls){
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
        var tab = tabs[0];
        chrome.tabs.update(tab.id, {url: urls});
    });
    window.close();
}

function loadMainContent(){

        $("#web_google").click(function(){
            goToWebsite("https://www.google.com/");
        });
        $("#web_facebook").click(function(){
            goToWebsite("https://www.facebook.com/")
        });
        $("#web_twitter").click(function(){
            goToWebsite("https://twitter.com/");
        });
}

-style.css

body {
  background-color: #63cdda ;
  margin-left:auto;
  margin-right:auto;
  width:800px
}

#web_google, #web_facebook{
  cursor: pointer;
}

ul#menu-v, #menu-v ul
{
    width:200px; /* Main Menu width */
    border:1px solid #CCCCCC;
    list-style:none; margin:0; padding:0;
    z-index:9;
}     

#menu-v li
{
    margin:0;padding:0;
    position:relative;    
    background-color:#EEEEEE; /*fallback color*/
    background-color:rgba(255,255,255,0.8);
    transition:background 0.5s;
}
#menu-v li:hover
{
    background-color:rgba(255,255,255,0.5);
}

#menu-v a
{
    font:normal 12px Arial;
    border-top:1px solid #CCCCCC;
    display:block;
    color:#444444;
    text-decoration:none;
    line-height:26px;
    padding-left:22px; 
    position:relative;           
}

#menu-v li:first-child a
{
    border-top:0;
}

#menu-v a.arrow::after{
    content:'';
    position:absolute;
    display: inline-flex;
    top:50%;
    margin-top:-4px;
    right:8px;
    border-width:4px;
    border-style:solid;
    border-color:transparent transparent transparent black;
    transition:border-color 0.5s;  
}

#menu-v li a.arrow:hover::after
{
    border-color:transparent transparent transparent red;
}

/*Sub level menu items
---------------------------------------*/
#menu-v li ul
{
    min-width:180px; /* Sub level menu min width */
    position:absolute;
    display:none;
    left:100%;
    top:0;
}

#menu-v li:hover > ul
{
    display:block;
}

我的代码（特别是js）有问题吗？还是我走错了方向？有人可以指出我的错误吗？

谢谢

询问Chrome Ext：启动在同一标签中打开链接的插件

0 个答案: