Chrome crx Could not establish connection

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

Chrome 扩展 sendResponse 返回 undefined (时而返回 undefined 时而返回 成功)

chrome.runtime.onMessage.addListener(function (res, sender, sendResponse) {
    sendResponse('done');
    return true
});

多次尝试发现仅 manifest.json 中 content_scripts 设定的域名可以接受通信,非设定的域名无法通信。

另网页加载过程中通信也会造成返回失败,可以判断 tab 的 status 是否等于 complete,再进行通信

一道题

一个二维数组,如何循环遍历将第一个数组作为下一级数组的父级,然后生成一个树型结构

<?php
$a = [['a'],['b'],['c'],['d'],['e']];
function getTree($list) {
    static $tree = array();
    static $i=0;
    $i++;
    $len = count($list);
    foreach($list as $k => $row) {
        if($i+$k == $len) {
            $tmp[] = $row[0];
            $tmp['child'] = isset($tree[count($tree)-1])?$tree[count($tree)-1]:$tree;
            $tree[] = $tmp;
            getTree($list);
        }
    }
    return end($tree);
}
$c  = getTree($a);
var_export($c);

结果

array (
  0 => 'a',
  'child' => 
  array (
    0 => 'b',
    'child' => 
    array (
      0 => 'c',
      'child' => 
      array (
        0 => 'd',
        'child' => 
        array (
          0 => 'e',
          'child' => 
          array (
          ),
        ),
      ),
    ),
  ),
)

PHP 使用 BerryChat 倍洽

$postUrl = 'https://hook.bearychat.com/=bwGFg/incoming/70e24a628680e77277fa35be7a11017x';
$curlPost = array("text" => json_encode($branch_data, JSON_UNESCAPED_UNICODE));

$curlPost = json_encode($curlPost);
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $postUrl);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);

curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $curlPost);
curl_setopt($curl, CURLOPT_HEADER, 0);
curl_setopt($curl, CURLOPT_HTTPHEADER, array(
	'Content-Type: application/json; charset=utf-8',
	'Content-Length:' . strlen($curlPost),
	'Cache-Control: no-cache',
	'Pragma: no-cache'
));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_exec($curl);
curl_close($curl);

iOS 微信浏览器 input 输入框BUG

iOS 微信浏览器 调起收起键盘 input 输入框失去焦点后无法点击的BUG

解决如下

$("input").blur(function () {
	setTimeout(() => {
		const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
		window.scrollTo(0, Math.max(scrollHeight - 1, 0));
	}, 100);
})

还有可能是 有些 display none 里面的元素有占位,特别是使用了 全屏 fixed 元素后,全屏无法点击

CSS 长文本跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>game1</title>
</head>
<body>
    <div id="marquee_left" class="marquee">
        <div id="marquee_left1" class="content">
测试文本1测试文本2测试文本3测试文本4测试文本5测试文本6测试文本7测试文本8测试文本9测试文本8测试文本7测试文本6测试文本5测试文本4测试文本3测试文本2
        </div>
    </div>
</body>
<script type="text/javascript">
    function run_marquee() {
        var speed = 30;
        //速度数值越大速度越慢
        var marquee_left1 = document.getElementById("marquee_left1");
        var marquee_left = document.getElementById("marquee_left");
        marquee_left1.innerHTML = marquee_left1.innerHTML  + '';
        function Marquee3() {
            if(!marquee_left1.innerHTML){
                return ;
            }
            if (marquee_left1.offsetWidth - marquee_left.offsetWidth <= marquee_left.scrollLeft) {
                if(marquee_left1.offsetWidth<5000){
                    marquee_left1.innerHTML = marquee_left1.innerHTML + ' ' + marquee_left1.innerHTML;
                }else{
                    marquee_left.scrollLeft -= marquee_left1.offsetWidth //scrollWidth 是对象的实际内容的宽,不包边线宽度
                }
            } else {
                marquee_left.scrollLeft++;
            }
        }
        setInterval(Marquee3, speed);
    }
    run_marquee();
</script>
<style>
  .marquee {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 35px;
	line-height: 35px;
	background: rgba(0, 0, 0, 0.3);
	color: #FFF;
	display: block;
	margin: 0 auto;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: clip;
	z-index: 23;
  }
  .marquee .content {
	display: inline-block;
	position: relative;
	padding-right: 0px;
	/*white-space: nowrap;*/
	/*animation: kf-marque-animation 2s infinite linear;*/
  }
</style>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>game1</title>
</head>   
<div class="marquee">
	<span class="content">
	测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本11111111
	测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本12222223
	测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本11111133
	测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本11111433
	<span class="content-space"></span>
  </span>
</div>	
	<style>
		/*滚动播放*/
        @keyframes kf-marque-animation {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-33.3%);
            }
        }
        .marquee {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 35px;
            line-height: 35px;
            background: rgba(0, 0, 0, 0.3);
            color: #FFF;
            display: block;
            margin: 0 auto;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: clip;
            z-index: 23;
        }
        .marquee .content {
            display: inline-block;
            position: relative;
            padding-right: 0px;
            white-space: nowrap;
            animation: kf-marque-animation 2s infinite linear;
        }
        .marquee .content-space {
            display: inline-block;
            width: 5em;
        }
    </style>
	<script>
    //滚动
    function run_marquee() {
        var speed = 50; // 速度 -- px每秒
        var $marquee = document.querySelector('.marquee');
        var $marqueeContent = $marquee.querySelector('.content');
        // 内容复制3份好有连续性
        $marqueeContent.innerHTML = $marqueeContent.innerHTML + $marqueeContent.innerHTML + $marqueeContent.innerHTML
        var contentWidth = $marqueeContent.getBoundingClientRect().width;
        if (contentWidth <= 0) {
            return;
        }
        // 内容复制了3份,宽度也要除以3
        contentWidth = contentWidth / 3;
        // 计算一次动画应该要花费多少时间
        var onceTime = contentWidth / speed * 1000; //ms
        $marqueeContent.style.animationDuration = onceTime + "ms";
    }
	run_marquee();
</script>

保存 Chrome 插件扩展 Crx 文件

保存 Chrome 插件扩展 Crx 文件,并手动添加未登录的 Chrome 浏览器中

首先 下载扩展 GET CRX

Get CRX

https://chrome.google.com/webstore/detail/get-crx/dijpllakibenlejkbajahncialkbdkjc?hl=zh-CN

然后打开你想保存成文件的插件页面,点击右键,会出现 Get CRX of this extension,点击即可保存

然后打开浏览器扩展页 chrome://extensions 打开开发者模式,然后将扩展拖到改页面,即可安装

安装完成可以将开发者模式关闭掉

CSS3 长文字跑马灯效果

<div class="marquee">
  <span class="content">
    raw js + css3 transition 跑马灯测试。跑马灯测试。跑马灯测试。 <span class="content-space"></span>
  </span>
</div>
<style>
    @keyframes kf-marque-animation {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-33.3%);
        }
    }
    .marquee {
        width: 100%;
        height: 44px;
        line-height: 44px;
        background: #e9eaea;
        display: block;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: clip;
        position: relative;
    }
    .marquee .content {
        display: inline-block;
        position: relative;
        padding-right: 0px;
        white-space: nowrap;
        animation: kf-marque-animation 12s infinite linear;
    }
    .marquee .content-space {
        display: inline-block;
        width: 5em;
    }
</style>
<script>
    //滚动
    (function () {
        var speed = 50; // 速度 -- px每秒
        var $marquee = document.querySelector('.marquee');
        var $marqueeContent = $marquee.querySelector('.content');
        // 内容复制3份好有连续性
        $marqueeContent.innerHTML = $marqueeContent.innerHTML + $marqueeContent.innerHTML + $marqueeContent.innerHTML
        var contentWidth = $marqueeContent.getBoundingClientRect().width;
        if (contentWidth <= 0) { // 没有内容搞什么动画
            return;
        }
        // 内容复制了3份,宽度也要除以3
        contentWidth = contentWidth / 3
        // 计算一次动画应该要花费多少时间
        var onceTime = contentWidth / speed * 1000; //ms
        $marqueeContent.style.animationDuration = onceTime + "ms"
    })()
</script>

小程序可用 CSS3 animation 实现的跑马灯

https://segmentfault.com/a/1190000009571886

预览地址

https://jsfiddle.net/650spwen/

PHP RSA 长字符串 分段加密解密

private $private_key = "-----BEGIN RSA PRIVATE KEY-----
MIICXAIBAAKBgQDvluFNiF8IrIsddK0OXBAvVBJH11OKvy9er1tRGn9yEJoHCJY3
EU/xz2LasCK8AwgRIqGJbvDBgRa70c3QT9j+wPqNqqJCSoSEKifnDUk1RgUReJT6
iqWaJyfM+WM3aHnKl61RZL4NV5qKe4CHMtaH/JtBCC/JzpuFER1P1IhCtQIDAQAB
AoGAaFYQb68/k4twWbeB1YsKEVJPU7HV08pGWrmKztr3PTk1mnKG2BxV8DwcFJg3
yCCZ1rx6FFuXxOzudYR8WIctO4wdsEbFky/cEGsfc6JJjiktmZaQ7MvobGNwnoFJ
QvRxDd+5uD87JE19iBSgUpLVtXbv+pZxSpD70vitnMdSctECQQD66Z5HsuC8DUPu
OLQHNN4ra5Op179Xlq7LiEFW4GaVgonw24kiLX23c7CK7295Rgxct1fwQKyuU9br
n2uj8toDAkEA9HJ85BWlm2OfUm6VI3Q99rjlpCnhRyz70+sEtf7if1SpctVxNTkX
UOnXlpPTohjAHNhzh9fa1hh/ySH9sRMu5wJAa//8uh3br/YBxFsx2lw+OPBQGe4c
lSXtzPu0LCHg5f/PQhYs28I696jbV6IiGFA3Z/0e4/HiohLCUp9HJMWWYwJACE53
pfyCUyRwfomZccn6bQ7dZtWxfQyvRgU/dLvDkJYc5/UO0sMs4qf/lnNRhrmWlaRZ
UK1qF0pf1ULdbw360wJBAObrYopW2kvIlE09j9SEgNtgVsmfZlf85c4EAZrFJP/T
8nMNKQGo92Gd3HvbjJ+ZBOP1IFt+FDAsXeSLWLAwJrg=
-----END RSA PRIVATE KEY-----";

private $public_key = "-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDvluFNiF8IrIsddK0OXBAvVBJH
11OKvy9er1tRGn9yEJoHCJY3EU/xz2LasCK8AwgRIqGJbvDBgRa70c3QT9j+wPqN
qqJCSoSEKifnDUk1RgUReJT6iqWaJyfM+WM3aHnKl61RZL4NV5qKe4CHMtaH/JtB
CC/JzpuFER1P1IhCtQIDAQAB
-----END PUBLIC KEY-----
";

public function rsa(){

	$content = "这是一段文字";
	$res = $this->superLongPublicKeyEncrypt($content,$this->public_key,false,true);
	var_dump($res);
	$content = "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";
	$res = $this->superLongPrivateKeyEncrypt($content,$this->private_key,false,true);
	var_dump($res);
}

public function superLongPublicKeyEncrypt($content, $rsaPublicKey, $choicePath = true, $withBase64 = false)
{
	if ($choicePath) {
		$pubKeyId = openssl_pkey_get_public($rsaPublicKey);//绝对路径读取
	} else {
		$pubKeyId = $rsaPublicKey;//公钥
	}

	$RSA_ENCRYPT_BLOCK_SIZE = 117;

	$result = '';
	$data = str_split($content, $RSA_ENCRYPT_BLOCK_SIZE);
	foreach ($data as $block) {
		openssl_public_encrypt($block, $dataEncrypt, $pubKeyId, OPENSSL_PKCS1_PADDING);
		$result .= $dataEncrypt;
	}

	if ($withBase64) {
		return base64_encode($result);
	} else {
		return $result;
	}
}

public static function superLongPrivateKeyEncrypt($content, $rsaPrivateKey, $choicePath = true, $withBase64 = false)
{
	if ($choicePath) {
		$priKeyId = openssl_pkey_get_private($rsaPrivateKey);//绝对路径
	} else {
		$priKeyId = $rsaPrivateKey;//私钥
	}

	if ($withBase64) {
		$data = base64_decode($content);
	}

	$RSA_DECRYPT_BLOCK_SIZE = 128;

	$result = '';
	$data = str_split($data, $RSA_DECRYPT_BLOCK_SIZE);
	foreach ($data as $block) {
		openssl_private_decrypt($block, $dataDecrypt, $priKeyId, OPENSSL_PKCS1_PADDING);
		$result .= $dataDecrypt;
	}

	if ($result) {
		return $result;
	} else {
		return false;
	}
}