Расширение Chrome Web, использование кнопок для открытия веб-страницы в новой вкладке - PullRequest
0 голосов
/ 17 сентября 2018

Я впервые разрабатываю расширение для Chrome.Это относительно просто, все, что я хочу, это открыть веб-страницу в новой вкладке при нажатии кнопки.Однако я не уверен, как это сделать без javascript, так как я знаю хромированные блоки, встроенные элементы <script> (или что-то в этом роде).Ниже мой popup.html.

<!DOCTYPE html>
<html>
<head>


<style>

.button {
    position: relative;
    background-color: #4F5B62;
    border: none;
    font-size: 28px;
    font-family: "Roboto Mono";
    font-weight: lighter;
    color: #FFFFFF;
    opacity: 0.6;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    border-radius: 12px;
}

.button:hover{
  opacity: 1;
}

.button:after {
    content: "";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

body{
  background-color: #263238;
}

head{
  background-color: #263238;
}
</style>
</head>
<body>


<button type="button" class="button">Access chatter</button>

</body>
</html>

Любая помощь будет оценена.

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

manifest.json

Сначала вам нужно добавить разрешение на использование chrome.tabs API в вашем manifest.json.

{
   ...
   "permissions": ["tabs"],
   ...
}

popup.html

Затем вы можете добавить идентификатор для своей кнопки и сценарий popup.js в нижней части тега <body>.

<body>
   <button type="button" class="button" id="btn1">Access chatter</button>
   <script src="popup.js"></script>
</body>

popup.js

И, наконец, добавить действие кнопки вваш сценарий.

Использование vanilla JavaScript

var button = document.getElementById("btn1");
button.addEventListener("click", function(){
    chrome.tabs.create({url:"http://www.google.com/"});
});

Использование jQuery

При использовании jQuery обязательно добавьте соответствующий сценарий выше popup.js.

$('#btn1').click(function() {
   chrome.tabs.create({url:"http://www.google.com/"});
});
0 голосов
/ 17 сентября 2018

Здесь вы можете прочитать о начале работы с расширениями Chrome https://developer.chrome.com/extensions/getstarted

А здесь вы можете увидеть ссылку для создания новой вкладки https://developer.chrome.com/extensions/tabs#method-create

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...